JavaScript Array to make our life easy – Under the Hood Concepts

What is an Array?

In my opinion, it is one of the most useful features of JavaScript which can allow us to store multiple keys-value pairs. (Read till last for another definition of  JavaScript Array as you going to learn some important, basic and under the hood concept about Array in JavaScript)

Key-value Pair example:

Name : ‘John’ ,  Age : 29,  hobby : ‘coding’ &  so on…

We can declare an Array in two syntax ways.

var arr = new Array();     // first way

var lastName = []; // another way and most used one

Example:

var fruit = new Array('Apple', 'Orange', 'Mango');

console.log(fruit);  //[ 'Apple', 'Orange', 'Mango' ]

var animal = ['dog', 'cat', 'elephant', 'tiger'];

console.log(animal); //[ 'dog', 'cat', 'elephant', 'tiger' ]

To access its value we need to use the square bracket with numbers between them. Number Starts from 0, it means to access the first element, we write [0] and for the second element, we write [1]. These numbers are called the “Index” of the array.

Example:

console.log('First element of array animal is: 'animal[0]);  
             // First element of array animal is dog

An array can store an element of any type in JavaScript like Number, String, Boolean, Function, Object, etc.

Example:

var person = ['john', 29, true, function(){console.log('hello')}, {name: 'john', age:29} ];

console.log(person[1]);   //29       (For Primitive type like Number, String, Boolean)

console.log(person[4].age);  //29    (For Objects)

person[3]();   //hello               (For Objects)

You can also store array in another array, sometimes it is called “multi-dimensional” array. And you can access them by double square bracket like arr[1][0]. Let see it through example

var someData = [['apple', 'orange', 'mango'],[26, 89, 53],[true, true, false]];

console.log(someData[2][2]);   // false

Adding elements into an array is also very easy.

var name = ['john', 'mark', 'jerry'];

name[3] = 'jack';     //adding 'jack' to 4th place

console.log(name);    //[ 'john', 'mark', 'jerry', 'jack' ]

Let’s check what will happen if by mistake we write “name[1]”  in place of “name[3]”

name[1] = 'jack'; 

console.log(name);     //[ 'john', 'jack', 'jerry' ]

Yes, we can replace the value inside the array by just write that element index in the square bracket.

To count the total number of elements stored inside the array, we use arrayName.length

Example:

var name = ['john', 'mark', 'jerry'];

console.log(name.length);       // 3

what if we set the length equal to zero. Let’s check

var name = ['john', 'mark', 'jerry'];

name.length = 0;

console.log(name);     // []   (an empty array)

JavaScript Array is an Object

Let me ask you another question, what if we write “name[100]” in the above name array example?

var name = ['john', 'mark', 'jerry'];

name[100] = 'jack';

console.log(name);        //[ 'john', 'mark', 'jerry', <97 empty items>, 'jack' ]

console.log(name.length);   //101

So, you can see, it is not always necessary that the length of an array is equal to the total number of elements inside the array. An index is just a key of the value stored inside the array (You remember I told you in the beginning about key-value pair). Now, let’s redefine the array as I promised in the beginning.

An array is an Object which stores the elements (value) which having index as a key. Let’s check it through our example

//define an Object person

var person = { firstName: 'john', age: 29 };

console.log(person['firstName']);   // john

console.log(typeof person);       // Object

//define an array name 

var name = ['john', 'mark', 'jerry'];

console.log(name[1]);         // john

console.log(typeof name);     // Object

Array.length = index of Last element of the array + 1

To get the index of any element in an array we have a function indexOf()

var name = ['john', 'mark', 'jerry'];

name[100] = 'jack';

console.log(name.indexOf('john'));     // 0

console.log(name.indexOf('jack'));     //100

One more question arises here, what if we search any element which is not inside the array. Let’s check

var name = ['john', 'mark', 'jerry'];

console.log(name.indexOf('jose'));    // -1

So, if we not found any element inside the array it will return a -1.

What is JavaScript Array Methods?

Array Methods are nothing but just the functions which are written for the arrays, to work on them. Like to search the elements, add or remove the elements, access or modify the elements and so many such things. If we have an array of 5-6 or maybe 10 elements, it is easy for human eyes to evaluate it directly. But if the elements are in hundreds or thousand and we need to find a few elements out of it, it is not possible without methods. So array methods are very important to work on arrays. I made separate lessons for methods of common types like for add and remove, finding the elements, access and work on arrays, etc.

Here I discuss a few simple methods so that you will have some idea about how array methods work.

Array.isArray()

This method checks if any data is an array or not. This method returns true or false according to the result.

Example:

var name = ['john', 'mark', 'jerry'];  

console.log(Array.isArray(name));                           //true

console.log(Array.isArray(['john', 'mark', 'jerry']));      //true

console.log(Array.isArray([]));                             //true

console.log(Array.isArray(new Array()));                     //true

console.log(Array.isArray(50));                              //false

console.log(Array.isArray('john'));                          //false

console.log(Array.isArray({ name: 'john' }));                //false

console.log(Array.isArray(function name() {}));              //false

toString()

This method converts an array to a string. Example

var name = ['john', 'mark', 'jerry'];

var nameString = name.toString();

console.log(nameString);              //john,mark,jerry

JavaScript Challenge#1

Also one javaScript challenge for you: I want a new array with all the months having more than 6 alphabets. Write your answers in the comment box. I will reply to you in the comment box. Also if you can’t get the answer, don’t worry as you can check our next article about the Array methods link provided soon.

var months = ["January", "February", "March", "April", "May", "June", 
"July", "August", "September", "October", "November", "December"]

This is one treat for you, an array of months, as it is highly demanded array by lazy developers like me..;)

We will come again with some more knowledge very soon. Sign up with us so that you will not miss any of the future articles in the sequence of JavaScript tutorials. You can also follow us on our twitter or Facebook pages for all the future articles.

Check out some other articles related to present crisis Coronavirus

Take care of yourself and your family!♥