Top JavaScript Array Methods, You are going to use almost daily.

Outline

• What are array Methods?
• forEach()
• map()
• filter()
• find()
• reduce()
• Conclusion

What are array Methods?

Before we talk about array methods let's talk about methods in general. Methods are nothing but the functions which are attached to an object. Now, array methods are the functions that are used to manipulate the arrays in different ways such as by adding, removing, replacing, etc elements from the array.

General Syntax: array.method()

1. forEach():

forEach method is used to loop over the elements of an array. It accepts a callback function that you want to execute for every element of the array.

Coding example:

const fruits = ['🍇', '🍉', '🍍', '🥝', '🍒', '🍓']

fruits.forEach(fruit => {
  console.log(fruit)
})

// output will be
// 🍇
// 🍉
// 🍍
// 🥝
// 🍒
// 🍓

In the above code snippet, we have an array of fruits and we want to print every fruit item on the console. So, we have called the forEach method on our fruits array and then we have printed every item on the console in the passed callback function.

2. map()

the map is another array method that we can use to loop over the elements of the array and then do something with each element of the array.

The main difference between forEach and map method is that unlike forEach method the map method will always return the brand new array.

let's see it in code:

const fruits = ['🍇', '🍉', '🍍', '🥝', '🍒', '🍓']

const newArray = fruits.map(fruit => {
  return fruit + " 🍕"
})

console.log(fruits);
// [ '🍇', '🍉', '🍍', '🥝', '🍒', '🍓' ]
console.log(newArray)
// [ '🍇 🍕', '🍉 🍕', '🍍 🍕', '🥝 🍕', '🍒 🍕', '🍓 🍕' ]

now in the above code snippet, we have our old array and we are looping through that array, now we have decided that we want to pair every fruit item with our fav 🍕 (I mean who hates pizza 😻). So, we are grabbing the fruit element which is currently being looped over and we are concatenating pizza with it.

The main thing which needs your attention here is the console.log() lines. Here we can say that after calling the map method on our original array it remains unaffected and we received a brand new array with the modified data.

3. filter()

filter function works based on the true and false conditions. It returns a brand new array of the elements that pass the condition test.

code implementation

const fruits = ['🍇', '🍉', '🍍', '🥝', '🍒', '🍓']

const newArray = fruits.filter(fruit => {
  return fruit !== '🍍'
})

console.log(newArray)
// output --> [ '🍇', '🍉', '🥝', '🍒', '🍓' ]

Let's say we hate the pineapple (because your partner doesn't want you to use it as topping on 🍕. 😜). So, we want to remove it from our fruits basket.

We have called the filter method on our fruits array and we have applied a test condition that keep the fruit that is currently being looped over only if it's not a pineapple. (fruit !== '🍍') this line is checking our condition.

4. find()

find function returns the first element from the array which satisfies the condition provided in the callback. Please note that even if there are multiple items in an array that satisfies the condition, the find method will only return the first element, and others will get ignored. In case, there is no element that satisfies the condition undefined will be returned.

Unlike other methods (filter, map, etc) that return an array the find method returns a single value rather than an array.

Example

const fruits = ['🍇', '🍉', '🍍', '🥝', '🍒', '🍓']

const value = fruits.find(fruit => fruit === '🥝')
console.log(value)

//output 🥝

const noValue = fruits.find(fruit => fruit === '🍕')
console.log(noValue)

//output undefined

The above code snipped has the implementation for both cases that is if the element is present or not.

In the first implementation, we are finding the kiwi in the fruits array as it is present in our fruits array it will be printed to the console.

In the second one, we are finding pizza in the fruits array, as it is not present then undefined will be printed on the console.

5. reduce()

The reduce function basically reduces our array to a single value. Let's see how it actually works

reduce method's syntax is array.reduce(callback, initialValue)

Here the callback will have the two arguments previous value and the accumulator. You can think of the accumulator as the currently looped element.

The final result of running the reducer across all elements of the array is a single value.

I know this method is let's complicated to understand so let's understand it via an example.

Code

const prices = [230,210,100,50,30,1000];

const total = prices.reduce((sum, acc)=>{
  return sum + acc;
}, 0)

console.log(total)
// 1620

In the above code, we have an array of prices and we want to calculate the total price. So we have called reduce method. The callback has two arguments, the sum and acc, here the initial value of sum is 0 which is provided as the second argument to the reduce.

Now on the first iteration the value of sum = 0 and acc = 230, so sum + acc ==> 230

on the second iteration the value of sum = 230 and acc = 210, so sum + acc ==> 440 and so on

After the final iteration, the total will be returned as 1620.

Conclusion.

In this blog, we have discussed frequently used array methods in javascript along with examples and working. One should understand these methods very well because you are not only going to use these in javascript, but these are some of the most used array methods in React as well. So, make yourself comfortable with these methods.

I hope I was able to deliver something good to you guys ☺. Feedbacks, suggestions, etc are always welcomed.

Have a fun and safe time and Thank you so much for dedicating your time to go through this blog ❤.

Let's Learn and Grow Together. Adios amigos/amigas hasta la proxima vez 💜☕