Array Methods You Must Know

In this blog we will be seeing methods like

push() and pop()

shift() and unshift()

map()

filter()

reduce() (basic explanation only)

forEach()

If you are not well versed with the basics of Array, you can refer to my blog named Arrays 101. It will make your fundamentals clear to an extent that you will never get confused with Array and its fundamentals.

Arrays 101 Blog link:
https://blogs.gaurangpods.com/javascript-arrays-101

Now we will see each method.

push() and pop()

push and pop are methods that are used to push an element into the Array. It is used to put a new element into the array.

The thing to note here is that it shoves the new element into the last. The newer element is not pushed randomly anywhere in the array. Instead it is given the last index.

So every new element that is pushed takes the n index if the array is of length n.

So the new array will be of the length n+1 and the index of the element shoved by us via push method will be n.

Example

Before

let arr = [1,2,3];

Using push

arr.push(4);

After

[1,2,3,4]

Now pop is the method that pops out the last element from the array and returns that particular element only.

This is a caveat that you need to remember. Pop method basically pops out the last element from the array and only returns that popped out element and not the array that is left after popping out. A lot of people get confused in it.

Pop pops out the element having the last index. If the length of the array is n then element having index n-1 is popped out.

Example

Before

let arr = [1,2,3,4];

let removed = arr.pop();

After

removed -> 4
arr -> [1,2,3]

shift()

Next method is shift().

It is basically used to remove the very first element of the array. If we were to remove the element with index 0 of an array we will be using the shift method to remove it.

One thing to note is that shift returns the element that was removed.

Example

Before

let arr = [1,2,3,4];

let removed = arr.shift();

Output

removed -> 1
arr -> [2,3,4]

Here shift removed the number 1 which was at index 0.

unshift()

Now we will see the unshift method.

This .unshift() basically shoves the element into the very beginning of the array. It makes the new element occupy the index starting from 0 of the array.

Example

Before

let arr = [3,4,5];

arr.unshift(1,2);

After

[1,2,3,4,5]

NOTE

If we unshift multiple elements into an existing array, those elements will be shoved into the array starting from index 0.

So if three new elements are shoved, they will be taking the index 0, 1, 2 and the element which was at index 0 earlier will get moved ahead.

Before we see the example of the use of .map() method, keep this in mind.

Next methods that we will be seeing are

.map()

.filter()

.reduce()

.forEach()

Out of these only .forEach() does not return a new array.

.map() and .filter() return a new array.

.reduce() returns a single value which could be number, string, object etc.

map()

We will now see the .map() method.

What it does is it iterates over each element of the array and returns a new array according to the condition described in the callback inside map().

Important thing to keep in mind is that it returns a new array.

Example

Before

let numbers = [2,4,6];

Using map

let doubled = numbers.map(function(num){
   return num * 2
})

After

doubled -> [4,8,12]
numbers -> [2,4,6]

Original array stays unchanged.

Traditional loop vs map

Traditional loop

let numbers = [2,4,6]
let doubled = []

for(let i = 0; i < numbers.length; i++){
   doubled.push(numbers[i] * 2)
}

Using map

let doubled = numbers.map(num => num * 2)

Both work the same but map makes the intent clearer.

filter()

Next is filter.

It filters out the elements according to the condition provided and returns a new array according to that condition.

Example

Before

let numbers = [5,12,8,20];

Using filter

let greaterThanTen = numbers.filter(function(num){
   return num > 10
})

After

[12,20]

So filter only keeps the elements that satisfy the condition.

reduce()

Next is reduce method.

Reduce is used when we want to calculate something out of the array and get a single result.

Example

Before

let numbers = [5,10,15];

Using reduce

let sum = numbers.reduce(function(accumulator,current){
   return accumulator + current
},0)

Result

sum -> 30

Here the accumulator keeps adding the values step by step until the final result is produced.

forEach()

Now the last one we will see is the forEach array method.

The important thing is that it does not return a new array. It simply runs a function for every element in the array.

It looks like this

arr.forEach((element,index) => {

})

You can see it has a callback with element and index as its parameters.

Example

let numbers = [10,20,30];

numbers.forEach(function(num){
   console.log(num)
})

Output

10
20
30

One important thing to remember is that forEach does not wait for asynchronous tasks.

Hope you enjoyed the blog and it helped in your journey of becoming a 100x Dev!