Array Methods Explained : Filter vs Map vs Reduce vs Foreach

UPDATE : I have made a video about this topic you can watch it here https://youtu.be/tIfKxfRCVlY

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.

We use arrays. A lot of arrays. We use arrays to show search lists, items added into a user cart, How many time you logged into your system right ?

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.

Let’s start with the easy one.

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 sample = [1, 2, 3];
// es5
sample.forEach(function (elem, index){
   console.log(elem + ' comes at ' + index);
})
// es6
sample.forEach((elem, index) => `${elem} comes at ${index}`)
/*
output
1 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 sample = [1, 2, 3] // yeah same array
// es5
var result = sample.filter(function(elem){
    return elem !== 2;
})
console.log(result)
// es6
var result = sample.filter(elem => elem !== 2)
/* output */
[1, 3]

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. As a ReactJS developer I use map a lot inside my application UI.

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 sample = [1, 2, 3] // i am never gonna change Boo! Yeah
// es5
var mapped = sample.map(function(elem) {
    return elem * 10;
})
// es6
let mapped = sample.map(elem => elem * 10)
console.log(mapped);
/* output */
[10, 20, 30]

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.

var sample = [1, 2, 3] // here we meet again
// es5
var sum = sample.reduce(function(sum, elem){
    return sum + elem;
})
// es6
var sum = sample.reduce((sum, elem) => sum + elem)
console.log(sum)

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.

In case you are wondering why I am writing es6 code above everywhere that is because I love es6.

Share this article on twitter below let everyone know you enjoyed it.

Hi, My name is Manoj Singh Negi. I am a Javascript Developer and writer follow me at Twitter or Github.

I am available to give a public talk or for a meetup hit me up at justanothermanoj@gmail.com if you want to meet me.

Really loved this article ?

Please subscribe to my blog. You will receive articles like this one directly in your Inbox frequently.

Here are more articles for you.

1. What are HTML Custom Elements
2. Trying out Shadow Dom
3. Building a React component as an NPM module
4. Throttle function in javascript with the example
5. React Context API Explained
6. Introduction to Haskell Ranges
7. HOC ( Higher-order components ) in ReactJS explained

Peace.