JavaScript : Troll-ing Map,Reduce and Filters :)

Don’t be confused with the title. I’m not here to troll Javascript’s most popular and useful methods.

This article is intended to make thinks crystal clear about the JavaScript’s method map, filter and reduce.

Very often we need to play with arrays. Like we want to modify each and every element of an array or we want to filter through a type of element from an array or we want a sum of all the element of an array. In this cases we need JS Map,Filter and Reduce to make our life a bit easier.

Let’s dive into these with some graphical funny description. Let’s start with ‘map’.

MAP:

Think , you have an array and you want to manipulate each of the items. What map basically do is , it creates a new array of the same length containing the manipulated items. Examples of this are squaring every element in an array of numbers, retrieving the name from a list of users etc.
From the picture below we notice that the number of items in the array, before and after map are same. But we can modify/manipulate the array items individually.

Map and Filter has one thing in common, both of them passes three arguments to the callback. They are the current item in the array, index of the current item and the entire array.

Code Example: Say, we have an array of 6USD’s but we want to change those USD’s to number only…

var values =[‘6usd’,’6usd’,’6usd’,’6usd’]
.map(function(value) {
return parseInt(value);
});
console.log(values); //result -> [6, 6, 6, 6]

So it’s not rocket science, just take the array you want to manipulate and then pass a function inside map. Then, we just need to return our desired output. The code snippet I described is in ES5 way. Let’s solve it in ES6 way…

const values = [‘6usd’,’6usd’,’6usd’,’6usd’]
.map((value)=>parseInt(value));
console.log(values); //result -> [6, 6, 6, 6]

It’s much more readable. Arrow function lets us leave the return keyword in one liner.

Filtering the germ out of water:

You’re thirsty, huh! Well take a glass of water; before drinking it make sure you filtered out the germ out of it, may be by boiling or whatever =D . Do you know, you have learnt the array operation filter already ? Yes, filter is exactly the same as it sounds .

A code example will do better. Think you have an array of numbers and you want to filter the numbers that are greater than 40.

const filtered = [15 , 140, 85]
.filter((number)=>number > 40);
console.log(filtered); // Result -> [140, 85]

Reducing work loads:

You’re doomed with work loads.You have to go to office, shopping and have some bank works too :( . ‘Fuck the system’ you decided to’ sleep’ :P . Well this is nothing but reducing arrays. Reduce takes all the items of an array and reduces them into a single value.

Reduce executes the callback function once for each element present in the array excluding holes in the array . It receives four arguments. The previous value, the current value, current index and the array.

Code example: We have an array of numbers. We want to add them all. let’s see…

const reducer = [10, 1, 2, 3, 4]
.reduce((previous,current) =>(previous+current));
console.log(reducer); // Result -> 20

Well we have covered a lot about JS map , reduce and filter. Let’s solve a final problem chaining all these three.

Problem :

Ten developers work in a web developer firm. Their working hours are different. The CTO wants to know the total working hour of the employees working more than 6 hours.
Given, const workHour = “6hours, 10hours, 6hours, 6hours, 6hours, 20hours, 6hours, 30hours, 40hours, 6hours”;

Solution:

Well the solution is simple . First we converted the string into an array by split. As you can’t add string like “10hours” you have to convert those into number by parseInt(). We map-ed through the array and converted them into number. Using Filter we filtered the work hour that’s greater than 6 hour. With the reduce method we will add those large work hours and get a total. Let’s go through the code …

const workHour = “6hours, 10hours, 6hours, 6hours, 6hours, 20hours, 6hours, 30hours, 40hours, 6hours”;
const largeTotalWorkHour = workHour.split(‘,’)
.map((value)=>parseInt(value))
.filter((value)=> value > 6)
.reduce((acc,current) =>(acc+current));
console.log(largeTotalWorkHour);

Conclusions:

In this article, you’ve learned how map, filter, and reduce work, how to use them, and roughly how they’re implemented in both ES6 and ES5 way.

By now I’m sure you’re going to dive deeper by further practicing and reading. Have fun, keep troll-ing =D