Map and Reduce function of Javascript

Introduction

In many situations, we need the Map and Reduce function of the Array.prototype. In this article we will look into what they are and how to work with them.

What is the Map function?

The MAP function loops through the original array in ascending order and calls the method for each value in the array. It the collects the results of the function to create a new array object with the results obtained.

Case 1:

Let us see an example.Suppose we want to make a multiplication table of 10 from a collection of numbers.

function multiplicationBy10(x){    		
   		return x + "* 10  = " + x * 10;  		
} console.log([1,2,3,4,5,6,7,8,9,10].map(multiplicationBy10));	

OR

console.log([1,2,3,4,5,6,7,8,9,10].map(function(x){return x + "* 10  = " + x * 10;}));

The output will be

What is happening is that from the original array , the map function is picking up elements one by one, computing the necessary action on it and returns the computed value for that particular element at it's indicated position in the original array replacing the old value with the new one.

Case 2:

Let us consider another example. Say we have the below array

var rnaTeam = 
[
    {
	      "EmpId": 1,
	      "EmpName": "Niladri Biswas",
	      "Deptid": 101,
	      "Deptname": "IT"
    }, {
	      "EmpId": 2,
	      "EmpName": "Arina Biswas",
	       "Deptid": 201,
	       "Deptname": "Finance"
    }, {
	      "EmpId": 3,
	      "EmpName": "Rajlaxmi Biswas",
	       "Deptid": 301,
	       "Deptname": "Doctor"
    }, {
	      "EmpId": 4,
	      "EmpName": "RNA Team",
	       "Deptid": 101,
	       "Deptname": "IT"
    }
];

The Objective

To get the records pertaining to Employee and Department from rnaTeam array such that there will be two different arrays one of Employee and another of Department

We can easily employ the Map function here to get it work like

var employees = rnaTeam.map(function(item) {
  return {
    EmpId: item.EmpId,
    EmpName: item.EmpName
  }
});
var departments = rnaTeam.map(function(item) {
  return {
    Deptid: item.Deptid,
    Deptname: item.Deptname
  }
});

The output will be

What is the Reduce function?

The Reduce function accepts an array as an input, acts on the individual elements from left to right and computes them in such a way so as to reduce them to a scalar/single value and returns the output.

Let us see an example.In the first example of Map function, we have made the multiplication table.Now, we will use the Reduce function to find the summation of all of them.

var multiplicativeValues = ([1,2,3,4,5,6,7,8,9,10].map(function(x){return x * 10;}));
console.log(multiplicativeValues); //[10,20,30,40,50,60,70,80,90,100]
var sum = 0;  
sum = multiplicativeValues.reduce(function(a,b){return a + b})
console.log("The sum is: " + sum);

The output will be

Behind the screen, the Reduce function was accepting two values viz. next, and initial by satisfying the syntax

array.reduce(nextvalue,initialvalue);

So, in the first attempt, 10 and 20 were passed and the reduce function acted on it to bring the result/reduce the result to 30.In the next attempt, initial value was 30 (from original array) and next value was 30 from the previous computation which resulted in 60 and like that.

For n array elements, the Reduce function is called n-1 times.

Program to find the Sum of N Natural Numbers

A few months back, while answering to a forum question in DNF, we came across this question. Out of the various solutions we presented, we proposed one with the MAP-REDUCE combination. We will discuss about that below

function SumofNNaturalNumbers() {
    var N=10;
    var sum = 0;                    

    var sum = Array.apply(null,Array(N)) 
              .map(function(_, index){
            	return index+1;
              }).reduce(function(a,b){return a + b})
    console.log("Sum Of N Natural Numbers : " + sum);
}

Let us first observe what the MAP function is doing

var N=10;
var sequentialNumberArrs = Array.apply(null,Array(N)) 
          .map(function(_, index){
        	return index+1;
          });
console.log(sequentialNumberArrs);	

The Array.apply() invokes the function with arguments as the second array.Since we need to generate the sequential numbers between 1 to 10 and to store it in an array at run-time/create a new array, so the MAP function is employed here. The output will be

Now this array became the input for the Reduce function which performed the summation.

Reference

Array.prototype.map()

Array.prototype.reduce()

Conclusion

Hope we all have enjoyed the article and understood the MAP and REDUCE function of JavaScript. Thanks for reading. Zipped file attached.