DEV Community

Cover image for Map, Reduce, and Filter - JS Array Functions Explained with Code
Neeraj Kumar
Neeraj Kumar

Posted on

Map, Reduce, and Filter - JS Array Functions Explained with Code

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 function

map() method creates a new array with the results of calling a function for every array element.

const output = arr.map(function) // this function tells map that what transformation I want on each element of array

Task 1: Double the array element



const arr = [1, 2, 3, 4, 5];
// pass a function to map
const double = arr.map(x => x * 2);

console.log(double);
// expected output: Array [2, 4, 6, 8, 10]



Enter fullscreen mode Exit fullscreen mode

Task 2: Convert array elements to binary



const arr = [1, 2, 3, 4, 5];
// Transformation logic:
function binary(x) {
    return x.toString(2);
}
const binaryArr1 = arr.map(binary);
console.log(binaryArr1) //[ '1', '10', '11', '100', '101' ]

// The above code can be rewritten as :
const binaryArr2 = arr.map(function binary(x) {
    return x.toString(2);//[ '1', '10', '11', '100', '101' ]
})
console.log(binaryArr2)
// OR -> Arrow function
const binaryArr3 = arr.map((x) => x.toString(2));
console.log(binaryArr3)//[ '1', '10', '11', '100', '101' ]



Enter fullscreen mode Exit fullscreen mode

Tricky MAP



const users = [
    { firstName: "Neeraj", lastName: "Kumar", age: 25 },
    { firstName: "Sandeep", lastName: "Kumar", age: 26 },
    { firstName: "Mayank", lastName: "Roy", age: 25 },
    { firstName: "Peter", lastName: "Mukherjee", age: 28 },
];
// Get array of full name : ["Neeraj Kumar", "Sandeep Kumar", ...]
const fullNameArr = users.map((user) => user.firstName + " " + user.lastName);
console.log(fullNameArr); // ["Neeraj Kumar", "Sandeep Kumar", ...]

----------------------------------------------------------

// Get the count/report of how many unique people with unique age are there
// like: {25 : 2, 26 : 1, 28 : 1}
const report = users.reduce((acc, curr) => {
    if(acc[curr.age]) {
        acc[curr.age] = ++ acc[curr.age] ;
    } else {
        acc[curr.age] = 1;
    }
    return acc;  //to every time return update object
}, {})
console.log(report) // {25 : 2, 26 : 1, 28 : 1}


Enter fullscreen mode Exit fullscreen mode

Filter function
Filter function is basically used to filter the value inside an array. The arr.filter() method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method.



const array = [5, 1, 3, 2, 6];
// filter odd values
function isOdd(x) {
  return x % 2;
}
const oddArr = array.filter(isOdd); // [5,1,3]

// Other way of writing the above:
const oddArr = arr.filter((x) => x % 2);


Enter fullscreen mode Exit fullscreen mode

Reduce function

It is a function which take all the values of array and gives a single output of it. It reduces the array to give a single output.



const array = [5, 1, 3, 2, 6];
// Calculate sum of elements of array - Non functional programming way
function findSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum = sum + arr[i];
  }
  return sum;
}
console.log(findSum(array)); // 17

// reduce function way
const sumOfElem = arr.reduce(function (accumulator, current) {
  accumulator = accumulator + current;
  return accumulator;
}, 0); 

console.log(sumOfElem); // 17


Enter fullscreen mode Exit fullscreen mode


// find max inside array: Non functional programming way:
const array = [5, 1, 3, 2, 6];
function findMax(arr) {
    let max = 0;
    for(let i = 0; i < arr.length; i++ {
        if (arr[i] > max) {
            max = arr[i]
        }
    }
    return max;
}
console.log(findMax(array)); // 6

// using reduce
const output = arr.reduce((acc, current) => {
    if (current > acc ) {
        acc = current;
    }
    return acc;
}, 0);
console.log(output); // 6

// acc is just a label which represent the accumulated value till now,
// so we can also label it as max in this case
const output = arr.reduce((max, current) => {
    if (current > max) {
        max= current;
    }
    return max;
}, 0);
console.log(output); // 6


Enter fullscreen mode Exit fullscreen mode

Function Chaining



// First name of all people whose age is less than 30
const users = [
    { firstName: "Neeraj", lastName: "Kumar", age: 25 },
    { firstName: "Sandeep", lastName: "Kumar", age: 26 },
    { firstName: "Mayank", lastName: "Roy", age: 25 },
    { firstName: "Peter", lastName: "Mukherjee", age: 28 },
];
// function chaining
const output = users
  .filter((user) => user.age < 30)
  .map((user) => user.firstName);
console.log(output); 

// Homework challenge: Implement the same logic using reduce
const output = users.reduce((acc, curr) => {
  if (curr.age < 30) {
    acc.push(curr.firstName);
  }
  return acc;
}, []);
console.log(output); 


Enter fullscreen mode Exit fullscreen mode

Example

Image description

Top comments (2)

Collapse
 
dperrymorrow profile image
David Morrow

great article! if you add javascript after your three opening tick marks, you will get syntax highlighting on your code examples.

Collapse
 
neeraj1997dev profile image
Neeraj Kumar

sure