DEV Community: Aryan Sharma

Arrays in JavaScript

Aryan Sharma — Sun, 19 Sep 2021 10:38:56 +0000

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

Map, filter, and reduce method in JavaScript

Aryan Sharma — Sat, 18 Sep 2021 15:11:00 +0000

I see a lot of peoples are getting confused when it comes to map, filter, and reduce method in JavaScript. Let's understand these array methods, one by one.

1. Map() method

Whenever we apply map method on an existing array we will get a new array, because of this our original array remain the same, its value will not change.

In simple words we can say that, with the help of map method we can transform an array.

Have a look at the syntax of the map method.

Array: This is the original array on which we want to perform map method.

callback: This is the function that will be called for every element of the original Array.

value: It is value we get from original array and can make changes to it. We will understand it with the help of an example.

index: It is the index of the value, it is optional.

array: It is the original array, it gives the same array on each iteration.

Let's understand with example:

In the above example, first we have created an array name originalArr with some numbers. And after that we are console logging the value in originalArr.
Now we are using map method over originalArr to get multiple of 2 of each element in the originalArr.

On the other hand, map method will return all the values to the array name newArr by multiplying them with 2.

Now we will check the originalArr, it will remain the same.

2. Filter() method

This method is used for filtering out the values from an Array based on some logic.

What I mean by this:

For example:
Consider this array of numbers,

const numberOneToHundred = [1,2,3,.....,100];

someone says get all the even number from this given array, or
get all the numbers that are greater than 50,
or get all the numbers which are divisible by 10.
So in all of the above examples we are using filter method to get all the values from an array based on some logic.

First we see the syntax and then we move on the example of the filter method.

Syntax:

Filter method example:

In the above example, we have an array of age of all members in the family, now we will look after for those people only who are above 18.

So filter method will filter out all the values which are greater than 18 and return a new array to the whoCanDriveCar variable.
And the original array will remain the same, filter method will return a newly created array.

3. Reduce() method

We use reduce method where we want to come up with a single value from a given array.

When you look at the meaning of reduce you will find that to make something smaller or less, so that is what reduce() method is doing.

For example: On applying reduce method on an array of numbers, we can find out the sum of all the digits, and come up with the single value.

reduce method example

In the above example, we are getting sum of the values in the numbers array. In the callback method we have two parameters: accumulator, and value. What accumulator is doing in the above code is, it is storing the result on each iteration of the reduce method on callback function.
The second argument in the reduce method is initialValue of the accumulator, which in this case is initialised with 0.
So what actually happened here, from a given array, we come up with a single value.

Note: This is my first post, if I miss something, then please let me know, your feedback will be really helpful.