Javascript has been known to be one of the most popular programming languages in the world and one of the core technologies behind everything that works on the web. As a frontend developer, it is essential that you get yourself familiar with some basic concepts of JavaScript, and it is advisable to learn the core part before moving on to any frameworks or libraries such as React, Vue, or Angular.

In this article, I want to do a quick review of these 4 useful methods in Javascript, which are forEach, map, filter, and reduce. They are all useful, but they each have their best use-case scenario. You should be able to deduce which, where, and what you will use of them after reading this article.

Let's have an array to interact with as we walk through each of the method.

const array = [12, 10, 6, 8]

ForEach

What forEach does, is to loop through the given array, and perform any action that you requested of it individually on each item of the array.

const newArray = array.forEach(num => { num + 2 });

What I did in the above snippet is to first assign a name to each of the array items, which I use num. Then I added two to each of the items. One thing to also note is that forEach method does not create a new array, therefore, if the method is not assigned to perform any operation, it will return undefined.

const array = [12, 10, 6, 8] 
const double = [] 
const newArray = array.forEach((num) => { 
        double.push(num + 2) 
      }); 
console.log(double)

Map

The map method creates a new set of arrays when used and returns this newly created array without having any effect on the main array. It can also be chained with other array methods such as sort, reduce, and others.

const array = [12, 10, 6, 8] 
const newArray = array.map((num) => { 
        return num + 2
      }); 
console.log(newArray) 

// can also be written this way
const array = [12, 10, 6, 8] 
const newArray = array.map(num => num + 2); 
console.log(newArray)

Filter

The filter method works like a sieve. You use the method to sieve out the part of the array you don't want and return the only one that is needed or useful for the operation. It does not affect the main array because it also returns a new array for you.

const array = [12, 10, 6, 8] 
const newArray = array.filter((num) => { 
        return num > 8
      }); 
console.log(newArray) 

// can also be written this way
const array = [12, 10, 6, 8] 
const newArray = array.filter(num => num > 8); 
console.log(newArray)

Reduce

You can use both map(), and filter() with the reduce method. It is very powerful and interesting to use. It comes with accumulator that stores all the information of what happens in the body of the function. It out only one single value and you can as well determine what will be the initial value of the accumulator, in the example below, we will assign 0 as the initial value of the accumulator.

const array = [12, 10, 6, 8] 
const newArray = array.reduce((acc, num) => { 
        return acc + num
      }, 0); 
console.log(newArray) //36

Read more about the reduce method here.

This article did not cover the difference between the 4 methods but only the uses of the methods.

I hope you find the explanation helpful.