In JavaScript, map(), filter(), and reduce() are built-in array methods used to transform, filter, and aggregate data without mutating the original array. They form the backbone of clean, functional programming in JavaScript.
map()
Use map() when you want to apply the same operation to every item in an array and get a new array of the same length back.
- Used to transform every element of an array and return a new array.
Example
let nums = [1, 2, 3, 4];
let result = nums.map(function(num) {
return num * 2;
});
console.log(result);
Output
[2, 4, 6, 8]
What happened?
1 → 2
2 → 4
3 → 6
4 → 8
Original array
[1, 2, 3, 4]
New array
[2, 4, 6, 8]
filter()
The filter() method creates a new array filled with elements that pass a test provided by a function.
The filter() method does not execute the function for empty elements.
The filter() method does not change the original array.
Used to select elements that satisfy a condition.
Example
let nums = [1, 2, 3, 4, 5, 6];
let even = nums.filter(function(num) {
return num % 2 === 0;
});
console.log(even);
Output
[2, 4, 6]
What happened?
1 x
2 ✔
3 x
4 ✔
5 x
6 ✔
Only the elements for which the condition returns true are kept.
reduce()
The reduce() method executes a reducer function for array element.
The reduce() method returns a single value: the function's accumulated result.
The reduce() method does not execute the function for empty array elements.
The reduce() method does not change the original array.
Used to combine all elements into a single value.
Example
let nums = [1, 2, 3, 4];
let sum = nums.reduce(function(acc, num) {
return acc + num;
}, 0);
console.log(sum);
Output
10
Step-by-step
Initial:
acc = 0
Iteration 1:
acc = 0 + 1 = 1
Iteration 2:
acc = 1 + 2 = 3
Iteration 3:
acc = 3 + 3 = 6
Iteration 4:
acc = 6 + 4 = 10
Final result:
10
Note
At the first callback, there is no return value from the previous callback.
Normally, array element 0 is used as initial value, and the iteration starts from array element 1.
If an initial value is supplied, this is used, and the iteration starts from array element 0.
map() → "Modify each item"
filter() → "Keep only matching items"
reduce() → "Reduce everything to one value"
reduceRight()
The reduceRight() method executes a reducer function for each array element.
The reduceRight() method works from right to left.
The reduceRight() method returns a single value: the function's accumulated result.
The reduceRight() method does not execute the function for empty elements.
Example
const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);
function myFunction(total, value, index, array) {
return total + value;
}
console.log(sum);
Output
99
How reduceRight() works
It starts from the right side of the array:
[45, 4, 9, 16, 25]
↑ start
Since no initial value is given:
total = 25
and iteration starts with:
value = 16
Final result:
99
The difference between reduce() and reduceRight() is only the direction:
reduce() → left to right
reduceRight() → right to left
For addition, both give 99, but for some operations (like string concatenation), the result can be different.
Note
At the first callback, there is no return value from the previous callback.
Normally, the last array element is used as initial value, and the iteration starts from the element before.
If an initial value is supplied, this is used, and the iteration starts from last element.
Rest Operator (...) and spread (...) operators
The rest (...) and spread (...) operators use the same symbol (...), but they do different jobs depending on where they are used.
1. Rest Operator (...)
Rest means:
Collect multiple values into a single array.
Example:
function add(...nums) {
console.log(nums);
}
add(10, 20, 30, 40);
Output
[10, 20, 30, 40]
What happened?
10, 20, 30, 40
are collected into
nums = [10, 20, 30, 40]
So ...nums is called the rest parameter.
2. Spread Operator (...)
Spread means:
Expand an array (or object) into individual values.
Example
let nums = [10, 20, 30];
console.log(...nums);
Output
10 20 30
What happened?
[10, 20, 30]
becomes
10, 20, 30
Copy an Array
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
console.log(arr2);
Output
[1, 2, 3]
Rest Operator (...): Collects multiple values into a single array.
Spread Operator (...): Expands an array or object into individual elements/properties.
Reference
https://www.w3schools.com/jsref/jsref_map.asp
https://www.w3schools.com/jsref/jsref_reduce.asp
https://www.w3schools.com/jsref/jsref_filter.asp
Top comments (1)
very understandable one👍🏻