map(), filter(), and reduce() in JavaScript

map → Executes a function on each element of an array

Every element of the array is passed to the callback function and returns a new array with the same length.

When to use map: If we want to perform the same operation/transformation on each element of the array and get back a new array of the same length with the transformed values.

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

var doubled  = numbers.map(n => n * 2);

doubled; // [2,4,6,8,10]

filter → Remove items which don’t satisfy a condition

Every element of the array is passed to the callback function. On each iteration, if the callback returns true, then that element will be added to the new array, otherwise, it is not added to the new array.

Use it when: You want to remove unwanted elements based on a condition.

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

var greaterThan2 = numbers.filter(n => n > 2);

greaterThan2; // [3,4,5]

Reduce → Creates a single value from elements of Array

While using reduce, we need to declare the initial value of accumulator(final result). On each iteration, inside the callback we perform some operation and that will be added to the accumulator.

Use it when: You want to find a cumulative or concatenated value based on elements across the array.

Example: Sum of numbers

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

var initialVal = 0;

let result=numbers.reduce((accu, val) => val + accu , initialVal);

console.log(result) // 15