Understanding Map, Filter and Reduce in JavaScript

Three of the most used javascript array methods, which can be a little overwhelming to a beginner. Let’s take a deep dive.

Photo by Brett Zeck on Unsplash

Map

The map() array method creates a new array that contains the result of a calling function on every array element from the original calling array. In simpler terms, every element of the original calling array is passed through a calling function a.k.a callback function and the result is passed onto another array.

Let’s look at the syntax of map() first:

var new_array = arr.map(function callback(element, index, array) {
    // Return value to new_array
}[, thisArg])

In the callback, the arguments index and array are optional and the element is the only required argument. Inside the callback, some action is performed and the result is returned.

Let’s take a look at a simple example for map():

Example

Let’s consider an array with numbers from 1 to 10.

const numbers=[1,2,3,4,5,6,7,8,9,10]

Now let’s apply a map function to triple all the numbers in the numbers array.

const tripled=numbers.map(function callback(item){ return item*3});
console.log(tripled) //[3,6,9,12,15,18,21,24,27,30]

The new array numbers contains all the elements in the numbers array which are tripled.

Filter

The filter() array method takes each element in the original array applies some kind of test or conditional statement against it. If the result is true, it gets pushed to the resulting array, and if the result is false, the element is omitted from the resulting array.

Let’s look at the syntax of filter():

var new_array = arr.filter(function callback(element, index, array) {
    // Return true or false
}[, thisArg])

The filter() method is similar to the map() method except the callback function should return either true or false. The only required argument in callback() is the element.

Let’s take a look at an example for filter():

Example

Let’s consider an array with numbers from 1 to 10.

const numbers=[1,2,3,4,5,6,7,8,9,10]

Now let’s apply a filter function to filter odd numbers from the numbers array.

const odd = numbers.filter(function callback(item){return item%2!==0});
console.log(odd); // [1,3,5,7,9]

The new array numbers contains all the elements in the numbers array which are odd.

Reduce

The reduce() array method is usually used to reduce the values of the array down to one value. The callback function in this case “reduce” callback function is executed on each element of the array and passing in the return value to the preceding element.

Let’s look at the syntax of reduce():

arr.reduce(callback[, initialValue])

The callback argument is a user defined function that will be called once for each item in the array. The callback can take four possible arguments.

• accumulator — the value returned from the previous iteration.
• currentValue — the current element in the array.
• index — the index of the current element.
• array — the original array on which reduce() was called.
• initialValue — It’s an optional argument. If provided will be assigned to the accumulator in the first call to the callback().

Let’s take a look at an example:

Example

Let’s consider an array with numbers from 1 to 10.

const numbers=[1,2,3,4,5,6,7,8,9,10]

Now let’s apply the reduce method to find the sum of all the elements in the numbers array.

const sum = numbers.reduce(function callback(result, item) {
  return result + item;
}, 0);
console.log(sum); // 55

Notice the “0" given as an argument. This is used to set the initial value of result in the during the first call of callback().

Hope this gave you a basic understanding of the workings map(), filter(), and reduce().

Thanks for the read.