Arrays in JavaScript

Introduction to arrays

An array is a data type that stores the data contiguously. Generally, arrays are used to store collections of different types such as numbers, strings, objects, etc. The syntax to declare an array:

const array1=[Element1,Element2,Element3....];
const array2 = new Array(Element1,Element2,Element3..)

For example, consider an array with 5 names that will be of string type.

const names=['Mary','James','Micheal','Johnny','Amber'];

As mentioned above, we can use an array to store elements of different data types i.e

const arrayOfDiffTypes=['Virat',{id:'JH',name:'John',rollno:'45'},789];

In the above array, there are three elements and all are of different data types. The whole object is treated as a single element in an array.

Accessing and Modifying the elements from an array.

We can use square brackets to access the element by passing the index to the square bracket. As arrays are zero indexes based they start from 0.

An Index is the value of the position of an element in the array.

let elements=['Ram','Vishnu','Krishna','Shiva','Ganesh'];
console.log(elements[0]); //Output : Ram
console.log(elements[3]); //Output : Shiva

The element present in the 0th index and 3rd index is Ram and Shiva.

Suppose we wanted to add another element to the elements array, we can do it using the same square brackets.

elements[5] = 'Venkat';
elements[6] = 'Lakshmi';
console.log(elements);

Output : ['Ram','Vishnu,'Krishna','Shiva','Ganesh','Venkat','Lakshmi']

The array got updated and they are appended based on the index value given in square brackets.

What if we declare an index value in which already an element exists? Let us check this case:

elements[3]='Sri';
elements[6]='Hanuman';
console.log(elements);

Here the elements in indices 3 and 6 will get replaced by the new elements declared. So the output will be

Output : ['Ram','Vishnu,'Krishna','Sri,'Ganesh','Venkat','Hanuman'];

In some cases, we may not able to count the number of elements in an array. So to overcome this situation we use the length property to find the length of an array.

const arrayLength = elements.length;
console.log(arrayLength) // Output = 8

To find the last element in an array we can use the length property.

console.log(elements[elements.length-1]); // Output : Hanuman

The length property starts counting from 1 but as the array is 0-based we reduce the length by 1.

Accessing the elements from an array of objects

Consider an array consisting of four students' data and each element is in object type. Let each object consists of the student's name, id, and roll number.

const students = [{id:'JK',name:'Jack',rollNo:56},
{id:'SM',name:'Sam',rollNo:44},
{id:'RK',name:'Rock',rollNo:15},
{id:'LS',name:'Lisa',rollNo:59}
]

So let us try to find out the roll number, id, and name of any of the students.

console.log(students[1].rollNo); //Output - 44
console.log(students[3].id); //Output - LS
console.log(students[0].name); //Output - Jack

We have access to the element in the object by first accessing the element using the index and then accessing the value of the specific property using the dot operator.

In detail: students[1].rollNo

The element present in the index position 1 will be accessed then using the dot operator we declare the name of the property i.e rollNo, then it will access the value from the object.

Adding properties and values to the objects in the array

Let us think other new students have joined the school lately and their data also should be added to the existing student's list.

To perform this task we use square brackets to access the specific object from an array and combined it with a dot operator which gives the value of a specific property in an object.

students[4]={id:'KV', name:'Keanu Reeves', rollNo:01};
console.log(students);

Output :
[{id:'JK',name:'Jack',rollNo:56},
{id:'SM',name:'Sam',rollNo:44},
{id:'RK',name:'Rock',rollNo:15},
{id:'LS',name:'Lisa',rollNo:59},
{id:'KV', name:'Keanu Reeves', rollNo:01}
]

Now there is a case the teacher wants to add another property for both Lisa and rock and the property name is Grade. To add a property to an object :

students[2].grade='A-';
students[3].grade='F'
console.log(students[2],students[3]);

Output:
{id:'RK',name:'Rock',rollNo:15,grade:'A-'},
{id:'LS',name:'Lisa',rollNo:59,grade:'F'},

Summary

Array is a data type that can store the collection of data.
Array is a special kind of object.
Array is mutable and it can be modified at our convenience.
We can declare arrays in two methods
Elements in an array can be of any type.
Elements are accessed and modified by using square brackets.
Objects in an array can be accessed and modified by using a combination of square brackets and dot operators.

That's a wrap about the basics of Javascript arrays.

Vignesh's blog