Why you should start using JavaScript map(), filter(), reduce() array methods

Photo by Fab Lentz on Unsplash

Array operators? I have my precious for-in(of) loop and everything works great, why do I need something else?

Trust me you need to use them as they are simple and result in much cleaner and maintainable code.

Take a look at the following examples and decide for yourself. There are many array operations you can use, but in this article i will focus on these methods:

1. map()
2. filter()
3. reduce()

The great thing about these methods is that they don’t modify the existing array (just like slice()), instead they return a new array( map(), filter()) or a value( reduce())

Lets get into them one by one:

1) map

Using map you can get a new array from existing array. Map takes a callback function as an argument. map() will call this function for every element of the array. Map expects that the callback function will return a value, this returned value will be part of the new array that will be returned by map.

The callback takes three arguments :

1. currentValue: array element that is currently being used
2. index: index of the current element
3. array: the entire array on which map is called

here arguments index , array are optional

Eg: View salary of employees after adding bonus

let salaries = [1000, 6000, 30000]
const BONUS = 5; //in percent
let newSalaries = salaries.map((salary) => {
 return salary + salary * (BONUS / 100);
})

Output: newSalaries = [ 1050, 6300, 31500 ]

Note: If the callback does not return anything, you will get a new array which is of the same length as the original one but will all elements as undefined.

2) filter

Filter is useful when you want a subset of items from the array (aha just like a normal filter). Filter takes a callback function which should return a boolean. If the value of the predicate is true, the value at that index will be included in the array that will be returned. The callback for filter takes the same arguments as that of map()

Eg: Find Salary above certain limit

let MIN_AMMOUNT = 6000;
let filteredSalaries = salaries.filter((salary) => {
   return salary > MIN_AMMOUNT
});

Output: filteredSalaries = [ 30000 ]

3) reduce

At times you will want to get a single value from an array. In such cases you can use reduce. Reduce takes a callback which will iterate over all the values and return a single value, initialvalue is the value that will be given to the accumulator.

It takes four arguments:

1. accumulator : value which was returned from previous invocation of the callback, initially it is equal to the first element in the array unless specified by the user using the argument initialvalue.

The other three arguments are same as that of map(), filter()

Eg: Sum of salaries

let totalOfSalaries = salaries.reduce((acc, curr) => {
   return acc + curr;
});
console.log(totalOfSalaries)

Output: totalOfSalaries = 37000

That’s it. Isn’t the code much more readable now? Not only that but it becomes easier to understand, reduces lines of code, plus original data is safe. Also you can chain these methods map().filter().reduce() for your complex data transformation needs :P

What’s next ?

Try out these methods and have fun. Initially it might seem confusing but once you practice these things will come naturally to you. Try out other array methods too find(), every(), some() to name a few. You can get complete list with amazing documentation here:

Array

If you like this article do hit the clap button, share with your friends. Suggestions if any are always welcome.