Abstract

Arrays are Objects.

Arrays are a special type of object. The type of operator in JavaScript returns "object" for arrays. But, JavaScript arrays are best described as arrays. Arrays use numbers to access their "elements".

The Difference Between Arrays and Objects

• In JavaScript, arrays use numbered indexes.

• In JavaScript, objects use named indexes.

When to Use Arrays. When to use Objects.

• JavaScript does not support associative arrays.
• You should use objects when you want the element names to be strings (text).
• You should use arrays when you want the element names to be numbers.

Scope of the article

• This article defines Array and ways to access the elements of an array. We also learn different methods of an array.

Let's start

Here is an example of an array with five elements with types String, Boolean, Object, Array, and Number.

let myArray= ['Vandit', true, {name: 'Vandit', rating: 4.9}, ['html', 'CSS', 'JavaScript' ], 112]

In the above example, Vandit is at index 0, true is at index 1, and so on...

---

Create an Array:

• The most basic way to create an array is to simply assign the array values to a variable.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];

• Another way is to use the array constructor.

new Array(4): This will create an array of 4 elements but none of the elements will be defined.

new Array( 'LCO', 'Hitesh Sir', 'Anurag Sir' ): This will create an array of 3 elements with index 0 as LCO, 1 as Hitesh Sir, and 2 as Anurag Sir.

const myArray= new Array('LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir');

---

How to Access the Elements of an Array:

We can access the elements of an array using its index.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray[0];        //LCO
myArray[1];        //Hitesh Sir
myArray[2];        //Anurag Sir
myArray[3];        //Anirudh Sir
myArray[4];        //Prashad Sir

If we want to access the elements of an array from backward, we can simply use the length property.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
const myLength= myArray.length
myArray[myLength-1];    //Prashad Sir
myArray[myLength-2];    //Anirudh Sir
myArray[myLength-3];    //Anurag Sir

If we want to access all the elements of an array one by one then we can simply use a loop to save our time.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
for(var i=0; i<myArray.length; i++){
    console.log(`Index=${i} Element=${myArray[i]}`)
}

Output:

LCO
Hitesh Sir
Anurag Sir
Anirudh Sir
Prashad Sir

---

Adding an Element in an Array:

The push() method is used to add an element at the end of an array and returns the new length of the array.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir'];
var newLength=myArray.push('Anirudh Sir');
console.log(newLength);    //4
console.log(myArray);    //[ 'egg', 'butter', 'bread', 'Anirudh Sir']

You can also push more than one item at the same time.

myArray.push('Prashad Sir', 'LearnCodeOnline', 'iNeuron');

The unshift() method is used to add the first element of an array and returns the added element.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.unshift('LearnCodeOnline');     // LCO
console.log(myArray);     // [ 'LearnCodeOnline', 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ]

---

Deleting Elements from an Array:

The pop() method is used to delete the last element of an array and returns the deleted element.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.pop();     // Prashad Sir
console.log(myArray);     // [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ]

The shift() method is used to delete the first element of an array and returns the deleted element.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.shift();     // LCO
console.log(myArray);     // [ 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ]

---

Determining the Length of an Array

The length method is used to determine the length of an array.

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
console.log(myArray.length);    //5

---

Some Important Methods of Array in JavaScript:

• slice(): This method is used to extract a specific portion of an array. It returns a new array and does not change the original array. Here start & end denotes the index of elements of the array.

Syntax:

slice() 
slice(start)
slice(start, end)  // end is not included

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
console.log(myArray.slice(2));        // ['Anurag Sir', 'Anirudh Sir', 'Prashad Sir']
console.log(myArray.slice(2, 4));        // [ 'Anurag Sir', 'Anirudh Sir']
console.log(myArray.slice(1, 5));        // ['Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir']
console.log(myArray.slice(-2));        // ['Anirudh Sir', 'Prashad Sir']
console.log(myArray.slice(2, -1));        // ['Anurag Sir', 'Anirudh Sir']  //extracting the third element through the second-to-last element in the sequence.

• splice(): This method adds and/or removes array elements. It method overwrites the original array.

Syntax:

splice() 
slice(start, how many, item1,...,itemX)

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
console.log(myArray.splice(2));        // ['LCO', 'Hitesh Sir']
console.log(myArray.splice(2, 2));        // [ 'LCO', 'Hitesh Sir', 'Prashad Sir']

• join(): This method joins all the elements of an array and returns a new string separated by a separator. By default, the separator is a comma (,) but we can do it by passing an argument to the join() method.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ];
console.log(myArray.join());        // "LCO,Hitesh Sir,Anurag Sir,Anirudh Sir"
console.log(myArray.join(''));        // "LCOHitesh SirAnurag SirAnirudh Sir"
console.log(myArray.join('-'));        //"LCO-Hitesh Sir-Anurag Sir-Anirudh Sir"

• fill(): This method fills all the array (or only the specified) elements with a static value. This method modifies the original array.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ];
myArray.fill('LCO');
console.log(myArray);     // [ 'LCO', 'LCO', 'LCO', 'LCO' ]

• includes(): This method is used to check whether an element is present in an array or not. If the element is present then it will return true else it returns false.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir' ];
myArray.includes('Prashad Sir')    //false
myArray.includes('Hitesh Sir')     //true

• indexOf(): This method is used to find the index of an element in an array. If an element is not present then indexOf() method returns -1.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.indexOf('Hitesh Sir');     // returns 1
myArray.indexOf('Prashad Sir');     // returns 4
myArray.indexOf('Anurag Sir');     // returns 2

• reverse(): This method reverses the position of all the elements in an array. This method modifies the original array.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.reverse();         // it returns [ 'Prashad Sir', 'Anirudh Sir', 'Anurag Sir', 'Hitesh Sir', 'LCO']

• sort(): This method first converts all the elements of the array into a string and then sorts them in ascending order. This method modifies the original array.

Examples:

const myArray= [ 'LCO', 'Hitesh Sir', 'Anurag Sir', 'Anirudh Sir', 'Prashad Sir' ];
myArray.sort();    // it returns [ 'Anirudh Sir', 'Anurag Sir', 'Hitesh Sir', 'LCO', 'Prashad Sir' ]

---

Summary

• An array is a collection of data items (same or different) stored under a single name.
• Array follows index-based access. The index always starts with 0.
• For insertion of element we use push() & unshift() method whereas for deletion we use pop() & shift() method.
• Some method to create an array is using the Array constructor, Array.of(), Array.from(), and the spread operator( ... )

And that’s pretty much it. 🙂

I hope this reference guide has been helpful for you!

Thanks to:- Hitesh Chaudhary