Simplify your javascript code using .map(), .reduce(), .filter()

So you have heard about the array functions in javascript like .map(), .reduce(), .filter() but you aren’t sure how to use those in your code then my friend this is the right place for you.

You worry a lot about your code readability and are tired of how the code logic messes up when you use simple looping statements like .for(), .forEach() then your searching journey ends here.

Before we get our hands dirty writing our code. First, we need to understand what these different functions do

Map

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Syntax :

var new_array = arr.map(function callback(element, index, array) {
    		// Return value for new_array
		}[, thisArg]);

Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Syntax:

var new_array = arr.filter(function callback(element, index, array){
                // Return true or false
               }[, thisArg]);

Reduce

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

Syntax:

arr.reduce(callback[, initialValue]);

Here’s a funny representation of the above functions :

Image Source: Google Images

It has been observed that the best way to learn any programming concept is to learn by applying it.
So let’s try to learn it by solving a problem.

Before we head towards the problem let’s take a good look at our data :

Problem Statement: “ Get state name having the most population density starting with the letter ’N’ “
Let’s take a quick look at the algorithm to solve our problem

Step 1: Filter data with the letter ‘N’

output: 
  [
   { id: 30, name: 'New Jersey', population: 43569, area: 2300 },
   { id: 40, name: 'New York', population: 98901, area: 550 }
  ]

Step 2: Calculate the population density of the filtered data

output:
  [
   { 
     id: 30, name: 'New Jersey', 
     populationdensity:18.94304347826087
   },
   { 
     id: 40, name: 'New York', 
     populationdensity: 179.82 
   }
  ]

Step 3: Get the State Name having the most population density

output : New York

If you go through the above code you can easily read and understand what each section of code is doing but the best thing is yet to come.

Chaining

We have seen in the above examples that how powerful these functions are on their own but the best part is that they can be chained together since they all work on arrays.

Arrow Functions

We can also use the arrow functions to make our code more concise(requires ES6 support)

You all might be wondering that this could have been also solved by .forEach(). So, why use the above functions? Let’s take a look at the code using .forEach()

If we look at the above code we can see how nested-ifs have been used and as the problem statement will become more complex we need to have multiple if…else conditions and hence the code readability also deteriorates.

Conclusion
Why one should prefer .map(), .filter(), .reduce() over .forEach() ?

1. Readability
2. Unit Testing