Higher Order Functions
A higher-order function is a function that takes one or more functions as arguments or returns a function as its result.
map, filter, and reduce are all higher order functions, which take a function as an argument.
Map, Filter, Reduce Fundamentals
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 for creating a new array from an existing one, applying a function to each one of the elements of the first 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()
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.
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.
var numbers = [1,2,3,4,5];
var greaterThan2 = numbers.filter(n => n > 2);
greaterThan2; // [3,4,5]
.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.
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.
var numbers = [1,2,3,4,5];
var initialVal = 0;
let result=numbers.reduce((accu, val) => val + accu , initialVal);
console.log(result) // 15
Real-world example
Let’s create a real-world practical example: Conducting an Interview.
1.map: Conducting a test for multiple candidates
2.filter: Selecting candidates who passed the test
3.reduce: Creating a team from the selected candidates
var users = [{"user": "👩🏻💻"},{"user": "👨🏾💻"},{"user": "💃"},{"user": "👨🏻🎓"},{"user": "🧑🏻🏫"},{"user": "🦸♂️"},{"user": "🧟♂️"}];
let resultDetails = users.map(user => {
let mark = Math.random() * 100;
user.mark = mark;
return user
});
//for me resultDetails
/*
0: {user: "👩🏻💻", mark: 76.03572182106969}
1: {user: "👨🏾💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "👨🏻🎓", mark: 25.801390164601944}
4: {user: "🧑🏻🏫", mark: 85.74297532451267}
5: {user: "🦸♂️", mark: 67.11805101358996}
6: {user: "🧟♂️", mark: 18.253450044782184}
*/
var selectedCandidate = resultDetails.filter(user => {
if(user.mark > 50){
return user;
}
});
/* selected candidate
0: {user: "👩🏻💻", mark: 76.03572182106969}
1: {user: "👨🏾💻", mark: 71.62190728557552}
2: {user: "💃", mark: 56.21776553271223}
3: {user: "🧑🏻🏫", mark: 85.74297532451267}
4: {user: "🦸♂️", mark: 67.11805101358996}
*/
// Create Team
let TeamMembers = selectedCandidate.reduce((teamMembers, user) => {
teamMembers.push(user);
return teamMembers;
}, []);
KEEP IT SHORT AND SWEET!
Top comments (1)
It isn't required to define an initial value with
reduce. If omitted, the first array value is used instead, and reduce proceeds from the second element. This can be useful to write more efficient code in some situations