Array Methods Explained : Filter vs Map vs Reduce vs Foreach

Okay so yeah we know they are different they have different purpose and goals still we don’t bother to understand them.

Let’s get straight to them.

Javascript Array inbuilt object provides some really cool and helpful functions to manage our data stored in arrays. We are going to take a look on this methods really quick.

1. Foreach

The easy one right ? we all know why this method is used for and even you don’t know about this method the name pretty much explains everything.

Foreach takes a callback function and run that callback function on each element of array one by one.

var sampleArray = [1, 2, 3];
// es5
sampleArray.forEach(function (elem, index){
   console.log(elem + ' comes at ' + index);
})
// es6
sampleArray.forEach((elem, index) => `${elem} comes at ${index}`)

/*
output1 comes at 0
2 comes at 1
3 comes at 2
*/

For every element on the array we are calling a callback which gets element & its index provided by foreach.

Basically forEach works as a traditional for loop looping over the array and providing you array elements to do operations on them.

okay! so clear ? then let’s filter some arrays.

2. Filter

Whenever you have to filter an array Javascript inbuilt method to filter your array is the right choice to use. Filter let you provide a callback for every element and returns a filtered array.

The main difference between forEach and filter is that

forEach just loop over the array and executes the callback .but

filter executes the callback and check its return value.

If the value is true element remains in the resulting array but if the return value is false the element will be removed for the resulting array.

var sampleArray = [1,2,3,4,5];

//es5

var resultArray = sampleArray.filter(function(elem){

return elem !==2;

})

console.log(resultArray);

//es6

var resultArray = sampleArray.filter(elem => elem !== 2)

console.log(‘hi’,resultArray);

See how easy it was. We passed a callback to filter which got run against every element in the array. In the callback we checked if the element !== 2 if the condition fails ( when elem was equal to 1 or 3 ) include them into the resulting array else don’t include the element in the resulting array.

Also take notice filter does not update the existing array it will return a new filtered array every time.

3. Map

One of my favourite and most used array method of all time.

Map like filter & foreach takes a callback and run it against every element on the array but whats makes it unique is it generate a new array based on your existing array.

Let’s understand map with an example

var sampleArray = [1,2,3,4,5];

var mapped = sampleArray.map(function(elem) {

return elem * 10;

})

console.log(‘map’,mapped); //10,20,30,40,50

//es6

var sampleArray = [1,2,3,4,5];

let mapped = sampleArray.map(elem => elem * 10)

console.log(mapped); // 10,20,30,40,50

Map ran through every element of the array, multiplied it to 10 and returned the element which will be going to store inside our resulting array.

Like filter, map also returns an array. The provided callback to map modifies the array elements and save them into the new array upon completion that array get returned as the mapped array.

And last but not least …

4. Reduce

As the name already suggest reduce method of the array object is used to reduce the array to one single value.

For example if you have to add all the elements of an array you can do something like this.

//es5

var sampleArray = [1,2,3,4,5];

var sum = sampleArray.reduce(function(sum, elem) {

return sum + elem;

})

console.log(‘reduced’,sum);

//es6

var sampleArray = [1,2,3,4,5];

let mapped = sampleArray.reduce((sum, elem ) => elem + sum)

console.log(mapped);

reduce takes a callback ( like every function we talked about ). Inside this callback we get two arguments sum & elem. The sum is the last returned value of the reduce function. For example initially the sum value will be 0 then when the callback runs on the first element it will add the elem to the sum and return that value. On second iteration the sum value will be first elem + 0, on third iteration it will be 0 + first elem + second elem.

So that is how reduce works it reduces the array into one single value and returns it upon completion.