Underhood of javascript

Understanding Map, Filter, and Reduce Functions

Subham Gope's photo
Subham Gope
·

4 min read

Agenda

  • What are these function.

  • Understanding clearly how & where to use .

  • Example of each function to visualize clearly.

Map

It's a built-in method available for array and used to transform an array, by transform i mean to say that i can transform each element of an array and after transforming, it returns a new array without modifying the actual array. Ex. an array of number is there and i want to double each element or triple, divide each element by 3.

const arr = [1,2,3,4,5];
//Double [2,4,6,8,10]
//Triple [3,6,9,12,15]

For better understanding i will show two method one by using for loop and other by Map method, so that You can get clear picture of how map simplify common task,improve code readability and even lead to more concise and efficient code.

//1. By normal For loop
const arr = [1, 2, 3, 4, 5];
const doubledArr = [];
for (let i = 0; i < arr.length; i++) {
  doubledArr.push(arr[i] * 2);
}
console.log(doubledArr);

As above you can see how lengthy it becomes if we want to transform array elements without modifying actual array, Now to simplify this we Will use Map function and will se how it returns transformed elements(array) without modifying the actual array.

//syntax of map
const output = arr.map();

Inside the map function we pass a function that tells what tranformation do we need like to double or triple the elements basically the transformation logic that we apply to each element.

const arr = [1, 2, 3, 4, 5];
function double(arg){
    return arg * 2;
}
const output = arr.map(double); // one way
console.log(output);

const output1 = arr.map(function double(arg){ // second way
    return arg * 2;
})
console.log(output1) 

const output2 = arr.map( arg => arg * 2); //third way
console.log(output2)
//all the output [2, 4, 6, 8, 10]
console.log(arr) //it's unmodified

Map function internally running the function for each element and creating a new array, it is mapping each element for transforming.

Filter

Filter function is used to filter the elements inside an array. Suppose we want to filter all the odd values in an array, you can think as providing array as input & finding out new array with odd elements here also without modifying the actual array. It enables a functional style of filtering data without need for explicit loops and conditional statement, with the example we can understand it clearly.

const arr = [1,2,3,4,5];
const output = arr.filter(); //syntax 
//inside filter we pass a function that contains the logic of filtering odd ones.

Here you can see different ways to write thefilter method.

const arr = [1,2,3,4,5];
function oddOne(arg){
    return arg % 2;
}
const output = arr.filter(oddOne); // one way
const output1 = arr.filter(function oddOne(arg){ // second way
    return arg % 2;
});
const output = arr.filter(arg => arg % 2); // third way

Reduce

Reduce is a function used where you have to take elements of the array and come up with single value out of it. Ex. largest element in an array, sum of element, here the output is a single value, In map and filter it was giving back array with multiple elements but in filter we get only one value. To understand better let's take two example with for loop & reduce function.

Syntax: const output = arr.reduce(function(acc,curr){}, intital value(any));

Here acc is the accumulator meaning after applying our logic we have to return our result through acc, and curr is the current element of array. So reduce iterates over each element & while iterating curr represents the current value.

const arr = [1,2,3,4,5];
//first we will write in non-functional way
function findSum(){
let sum = 0;
for(let i = 0;i < arr.length; i++){
    sum = sum + arr[i];
}
return sum;
}

console.log(findSum(arr));

Now we will transform the above code and make it in a reduce way.

const arr = [1,2,3,4,5];

const output = arr.filter(function(acc,curr){
    acc = acc + curr;
    return acc;
},0);
console.log(output);

Summary

These methods were introduced in JavaScript to support functional programming paradigms and to provide developers with powerful tools for working with arrays in a functional and declarative manner.

  • Use map when you want to touch,modify each element of array

  • Use filter when you want to select few elements from array and not modifying the elements.

  • Use reduce when you want to calculate and return a single value or object out of the array.

Question for You: Given an array of numbers, filter out all the prime numbers and then calculate the sum of the remaining numbers.

JavaScript