JavaScript Array Operations: Harnessing the Power of map, filter, reduce

Map, Filter & Reduce are some of the most commonly used methods while using Javascript.

Be it React, Node or any other Javascript-based framework, we need to use these methods.

Love me or hate me but you can't ignore me kinda situation 😂

So let's get started.

Map

It loops over the array by creating a new function for every element in the array.

A new array is created to store the result generated.

The original array is not modified.

Example

Here, we multiply every element of the array with 2 & the result is stored in the result array.

Try to console.log numbers array. It would still be the same as it was earlier.

// Syntax
// map(callBackFunc(element, <index>))
const numbers = [1,2,3,4,5,6,7];
const result = numbers.map(number => number * 2);

console.log(numbers); // would still be [1,2,3,4,5,6,7]
console.log(result); // would be [2,4,6,8,10,12,14]

Filter

As the name suggests, this method is used to filter elements from the array based on a condition.

A new array is created to store the result generated.

The original array is not modified.

Example

Here we specify a condition to get only those numbers which are divisible by 2.

Rest all numbers are ignored.

// Syntax
// filter(callBackFunc(element, <index>))
const numbers = [1,2,3,4,5,6,7];
const result = numbers.filter(number => number % 2 === 0);

console.log(numbers); // would still be [1,2,3,4,5,6,7]
console.log(result); // would be [2,4,6]

Reduce

The reduce method will execute a custom callback function for every element of the array & forward the result of the first element to the next & so on until the entire array is traversed.

Sounds complicated? Don't worry I'll explain with an example.

Let's say we have an array of numbers. We want to calculate the total of all elements in this array.

// Syntax
// reduce(callBackFunc(previousValue, currentValue, <currentIndex>, <orignalArray>), startingValue)
const numbers = [1,2,3,4,5,6,7];
const startingValue = 0;
// What is startingValue?
// When we start any calculation, 
// what's the initial or starting value? 
// We always start from 0 right? 
// Well that's exactly what I've done here
const total = numbers.reduce((previousValue, currentValue) => previousValue + currentValue, startingValue)
console.log(total) // would be 28

Initially, the previousValue equals startingValue. Then as we go on iterating, previousValue keeps on getting updated.

If you fail to do so, undefined is returned.

Difference between Map & Filter

Here comes the tricky question. What's the difference between the two methods?

You might already know this but just try to answer once. Most of us have misunderstood the difference.

Let me explain with an example.

const numbers = [1,2,3,4,5,6,7];
const evenNumbersWithMap = numbers.map(number => number % 2 === 0);
const evenNumbersWithFilter = numbers.filter(number => number % 2 === 0);

The evenNumbersWithFilter is fairly easy to predict.

Can you try to predict the result for evenNumbersWithMap?

Will evenNumbersWithMap & evenNumbersWithFilter arrays have similar content?

Please try to predict the answer yourself before you see the answer below.

Answer

NO! The content of both arrays is not the same.

The value of evenNumbersWithMap would be,

[undefined, 2, undefined, 4, undefined, 6, undefined];

In the above example, we mentioned the condition number => number % 2 === 0.

So what when the condition was not satisfied for some elements?

The Filter method simply ignored falsy values but the Map method returned undefined for every falsy value.