Map, reduce, and filter are all array methods in JavaScript. Each one will iterate over an array and perform a transformation or computation. Each will return a new array based on the result of the function.
Map
The map() method is used to create a new array from an existing one, applying a function to each one of the elements of the first array.
Syntax:
let newArray = inputArray.map(function callback(element, index, array) {
// Return value for new_array
}[, thisArg])
Example:
// Each number in an array is doubled.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8]Filter
The filter() method takes each element in an array and it applies a conditional statement against it. If this conditional returns true, the element gets pushed to the output array. If the condition returns false, the element does not get pushed to the output array.
Syntax:
var new_array = arr.filter(function callback(element, index, array) {
// Return true or false
}[, thisArg])
Example:
// Odd numbers are "filtered" out, leaving only even numbers.
const numbers = [1, 2, 3, 4];
const evens = numbers.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]Reduce
The reduce() method reduces an array of values down to just one value. To get the output value, it runs a reducer function on each element of the array.
Syntax:
arr.reduce(callback[, initialValue])
Example:
// Adds every number together in an array of numbers.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function (result, item) {
return result + item;
}, 0);
console.log(sum); // 10