map(), filter(), and reduce() in Javascript

#javascript #webdev #programmingtips

In JavaScript, map, filter, and reduce are powerful array methods that allow you to manipulate and transform arrays efficiently. Each method iterates over the elements of an array, applies an operation, and returns a new array based on that.

Map Function

The main purpose of the map function is to create a new array from the existing one.

const arr = [5,3,7,4,6];

function square(x){
   return x * 2;
}

const double = arr.map(square);
console.log(double); // [10,6,14,8,12]

//an alternative method

const triple = arr.map((x) => x * 3);
console.log(triple); // [ 15, 9, 21, 12, 18 ]

key point

For each array element, the map() calls a function to generate a new array. The original array is unchanged. When an array element is empty, the method is not executed.

Filter Function

The primary goal of the filter function is to filter out elements from an existing array to build a new array.

const arr = [7,10,6,3,8];
const even = arr.filter((x) => x % 2 == 0 );
console.log(even); // [10, 6, 8]

key point

Elements that pass are generated in a new array by the filter() method. The original array is unchanged. When an array element is empty, the method is not executed.

Reduce Function

its function that takes all the values of the array and comes up with a single value out of them. It reduces the array to give a single output.

In the reduce array method there are two parameters accumulator and current.Current represents the value of the current element in the array. The accumulator holds the value result from the previous call to the callback function. On the first call, its value is initialValue if the latter is specified; otherwise, its value is 0.

const arr = [7,16,4,8,3];

//normal function 
function sumOfNumbers(arr){
   let sum = 0;
   for(let i = 0; i < arr.length ; i++){
       sum += arr[i];
   }
   return sum;
}
console.log(sumOfNumbers(arr)); // 38

//reduce array method
const sum = arr.reduce(function (acc,curr){
   acc += curr;
   return acc;
},0);
console.log(sum); // 38

key point

The accumulator result is the only value that the reduce() method returns. The original array is unchanged. When an array element is empty, the method is not executed.

Example

Now let us take an example for all the map, filter and reduce methods and see how to implement

const users = [
    { firstName: "Babu", lastName: "Kumar", age: 29 },
    { firstName: "Minnu", lastName: "Jose", age: 39 },
    { firstName: "Ramu", lastName: "Vasu", age: 35 },
    { firstName: "Kuttu", lastName: "Shaji", age: 48 },
];

//print out all the users fullname = ["Babu Kumar", "Minnu Jose" , ....];
const fullName = users.map((x) => x.firstName + " " + x.lastName);
console.log(fullName);

//print out count of how many unique people with unique age are there 
//age = { '29': 1, '35': 1, '39': 1, '48': 1 }

const age = users.reduce((acc, curr) => {
    if(acc[curr.age]){
        acc[curr.age] = ++acc[curr.age];
    }else{
        acc[curr.age] = 1;
    }
    return acc;
},{})
console.log(age);

//print out the user's first name where age is greater than 30

//method 1: using function chaining
const result = users.filter((x) => x.age > 30).map((x) => x.firstName)
console.log(result);

//method 2: using reduce function
const answer = users.reduce((acc,curr)=>{
if(curr.age > 30) {
acc.push(curr.firstName);
}
return acc;
},[]);
console.log(answer);

So this was all about the Map, Filter, and Reduce. Hope it helped you understand the concept better and make your journey of learning JavaScript better.

Thank you for reading the article 🙏🏻 and if you liked it, do share.