Map Filter and Reduce

Map Filter and Reduce

·

3 min read

Table of contents

Map, filter, and reduce are three higher-order functions in JavaScript that can be used to manipulate arrays.

Map()

the map() function is a method that is called on an array and takes a callback function as an argument. The callback function is applied to each element in the array, and a new array is returned with the modified elements.

Here is an example of how to use the map() function:

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

const doubledNumbers = numbers.map(number => number * 2);

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

In this example, the map() function is called on the numbers array and a callback function is passed to it as an argument. The callback function takes a single argument number and returns the result of number multiplied by 2. The map() function applies this callback function to each element in the numbers array and returns a new array doubledNumbers with the modified elements.

Filter()

the filter() function is a method that is called on an array and takes a callback function as an argument. The callback function is applied to each element in the array, and a new array is returned with only the elements that pass the test implemented in the callback function.

Here is an example of how to use the filter() function:

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

const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4]

In this example, the filter() function is called on the numbers array and a callback function is passed to it as an argument. The callback function takes a single argument number and returns true if number is even (that is, if number is divisible by 2 with no remainder) and false otherwise. The filter() function applies this callback function to each element in the numbers array and returns a new array evenNumbers with only the elements that pass the test (that is, the even numbers).

Reduce()

the reduce() function is a method that is called on an array and takes a callback function as an argument. The callback function is applied to each element in the array, cumulatively combining them into a single value.

Here is an example of how to use the reduce() function:

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 15

In this example, the reduce() function is called on the numbers array and a callback function is passed to it as an argument. The callback function takes two arguments: accumulator and currentValue. On each iteration of the reduce() function, the accumulator is updated with the result of adding it to the currentValue. The reduce() function also takes an optional initial value as the second argument (in this case, 0). If an initial value is not provided, the first element in the array will be used as the initial value and the callback function will be applied to the remaining elements in the array.