Arrays in JavaScript

If we talk about a variable, it can store only one value at a time, but what if we need to store multiple values of the same type.

Let's understand it with an example:

const firstVehicle = "Bike";
const secondVehicle = "Car";
const thirdVehicle = "Scootey";

Note: You can click below to execute the examples given in this article.
Execute code here

If we have limited number of Vehicles list then we can store them in different variables,
but what if we have list of 100 vehicles(I have taken the example of vehicle, you can think of anything here),
I don't think it would be a good idea to store them in different variables. To overcome this problem, we have array.

Let's see how can we solve this issue with the help of an array

const vehicleWeHave = ['Car','Scootey','Bike'];

Now you may ask a question how we will access these values.
Have a look at the example below to understand how we can access these values:

const vehicleWeHave = ['Car','Scootey','Bike'];
console.log(vehicleWeHave[0]);// Car
console.log(vehicleWeHave[1]);// Scootey
console.log(vehicleWeHave[2]);// Bike

You may be thinking about, what is 0,1,and 2 right after the variable name? These are index number.
It means value at the first place can be accessed by simply writing vehicleWeHave[0],second value by vehicleWeHave[1] and so on.

We can access all the values of the array in same way.

Note: Index always starts with 0, that's why in the above example, to access the very first value we have used 0, instead of 1.

You can also use loops to access the values of the array:

const vehicleWeHave = ['Car','Scootey','Bike'];
for(let index = 0; index < vehicleWeHave.length; index++){
console.log(vehicleWeHave[index]);
}

Now, let's understand some common methods we can apply on array:

1. pop()

This method will remove the last element from the array.

const vehicleWeHave = ['Car','Scootey','Bike'];
vehicleWeHave.pop(); // remove Bike from this array

Now this array will have only two values in it, because we have already removed last value.

The pop method will return the removed item. To see the effect of pop method, look the code below.

const vehicleWeHave = ['Car','Scootey','Bike'];
const removedVehicle = vehicleWeHave.pop();
console.log(removedVehicle);// Bike
console.log(vehicleWeHave);//['Car','Scootey']

What we have done in the above code is we remove the last item from the given array, and you have already learnt that pop method will return the removed item.

So, to see the effect of pop method we stored returned value in the removedVehicle variable.

2. push()

The push method will help you in adding element at the end of the given array and it will return the new length of the array.

const vegetable = ['Onion','Spinach','Carrot'];
const lengthOfVegetableArray = vegetable.push('Tomato');

console.log(vegetable);//['Onion','Spinach','Carrot','Tomato']

console.log(lengthOfVegetableArray);//4

In the above example we can see that vegetable array got a new value.

And we have stored the returned value in the lengthOfVegetableArray(which is 4 in this case) variable.

3. shift()

This method will remove the element from starting of the array and shift method will return the removed item.

The example below have an array name vegetable, but by mistake we have added fruit in it. So I have to remove this fruit from the given array.

const vegetable = ['Apple','Onion','Spinach','Carrot'];
const removedFruit = vegetable.shift();
console.log(removedFruit);// Apple
console.log(vegetable); // ['Onion','Spinach','Carrot']

Now, removedFruit store the value(which is apple in this case) returned by the shift method applied on vegetable array.

4. unshift()

This method helps you in adding the new element in beginning of the existing array and will return the new length of the array.

const vegetable = ['Onion','Spinach','Carrot'];
const newVegetableLength = vegetable.unshift('Potato');
console.log(newVegetableLength);//4
console.log(vegetable);//['Potato','Onion','Spinach','Carrot']

Now unshift method will return the length to the newVegetableLength and new element will be added in the beginning of the array.

5. concat()

This method will merge two or more arrays together.

const bike = ['Ninja','Bullet','Hayabusa','Duke','Apache'];
const cars = ['Porsche','Ferrari','Lambourghini','Mercedes'];

In the above example we have two arrays bike and cars. Now with the help of concat method we will merge them together.

const myCollection = bike.concat(cars);
console.log(myCollection);//['Ninja','Bullet','Hayabusa','Duke','Apache','Porsche','Ferrari','Lambourghini','Mercedes']

The original array bike will remain the same. Concat() method always return a new array.

6. reverse()

This method will help you in reversing the original array.

const weekDays = ['Sat','Fri','Thurs','Wed','Tue','Mon','Sun'];
weekDays.reverse();
console.log(weekDays);//['Sun', 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri', 'Sat']

*Thanks for reading, please let me know if there is something I missed.*

**Click below to read about map, filter, and reduce method of array.**

Map, Filter, and Reduce