Hi folks 👋
I hope you all are doing great.
In this post, we will be learning about JavaScript Arrays and how they work.

So before Arrays, we use to store data in variables, and it was good if we are not working on a large scale. But think of a situation where we have a class of 30 students, and we have to store the names of 30 students, therefore we have to create 30 different variables, and also we have to maintain it, which is very inefficient so that's where we use arrays.

Arrays

In JavaScript, an Array is a container that can store multiple values of different data types. An array holds an ordered list of values known as elements of that Array. Each element in the Array has a specific index through which it can be accessed later on.

Creating JavaScript Arrays

There are two ways to create arrays:

• Using Array constructor
• Using array literal notation

Using Array Constructor

The array constructor is used to create arrays.

let fruits = new Array(2);
console.log(fruits.length); // 2
console.log(fruits[0]);     // undefined

When we pass only one positive integer value to the Array constructor, it will create an array of length, and each element would have an undefined value.
You'll rarely use the Array() constructor to create an array in practice.

Using array literal notation

The array literal form uses the square brackets [] to wrap a comma-separated list of elements.

let arrayName = [element1, element2, element3, ...];

Declaring and Initialising arrays

Declaring empty arrays:

let emptyArray = []; 

Initializing arrays:

let fruits = ['Apple', 'Banana'];

We can also add values of different data types

let values = ['hello', 432, true];

Accessing Values

To access an element in an array, you specify an index in the square brackets []. The first element of an array starts at index 0, the second element begins at index 1, and so on.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits[0]); // 'kivi'

Updating Values

To update the value of an element, you assign that value to the element like this:

let fruits= ['kivi', 'mango', 'banana']; 
fruits[1] = 'watermelon';
console.log(fruits[1]); // 'watermelon'

Length of Array

To get the Array's length, we use the .length property, and it is a read-only property which means we can not interact with it.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.length); // 3

Basic Array Operations

Add elements

To add the elements to the end, we use the .push() method. We can add a list of elements in the parenthesis that are added in the Array.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.push('watermelon');
console.log(fruits); // ['kivi', 'mango', 'banana', 'watermelon']

To add the elements to the beginning, we use the .unshift()method.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.unshift('watermelon');
console.log(fruits); // ['watermelon', 'kivi', 'mango', 'banana']

Remove elements

To remove an element from the end, we use the .pop() method. It removes only one element at a time.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.pop();
console.log(fruits); // ['kivi', 'mango']

To remove an element from the beginning, we use the .shift() method.

let fruits= ['kivi', 'mango', 'banana']; 
fruits.shift();
console.log(fruits); // ['mango', 'banana']

Check the index of an element:

To get the position of an element in the array, we use the .indexOf() method.

let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.indexOf('mango')); // 1

Wrapping up

That's all for this post, if you find any mistakes, or want to share more information leave it in the comments.
Thanks for reading!

Moazam Ali
Front-End Developer