DEV Community

Cover image for Learn how to use map, filter, and reduce in JavaScript.
Santan kr Sharma
Santan kr Sharma

Posted on

Learn how to use map, filter, and reduce in JavaScript.

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]
Enter fullscreen mode Exit fullscreen mode

.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]
Enter fullscreen mode Exit fullscreen mode

.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
Enter fullscreen mode Exit fullscreen mode

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;
}, []);

Enter fullscreen mode Exit fullscreen mode

KEEP IT SHORT AND SWEET!

Top comments (1)

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

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