May 17, 20201 min read

Simplify Your JavaScript Using Map, Reduce And Filter

Introduction

In this article, you will learn how to simplify your Javascript using Map, Reduce, and Filter.

Map Function

If we have an array containing multiple objects and need the name of the object of the person in the array, then, we can map function.

Map functions run a callback function for each value in an array and returns each new value in the array

var studentData = [  
  { id: 1, name: 'Amit' },  
  { id: 2, name: 'Swetha' },  
  { id: 3, name: 'Ram' },  
  { id: 4, name: 'Shiv' }  
];  
 
// using forEach 
var studentNames = [];  
studentData.forEach(function (student) {  
  studentNames.push(student.name);  
});  
 
console.log(studentNames);  
 
const studentNames = studentData.map(student => { return student.name });  
 
// more simpler 
const studentNames = studentData.map(student => student.name);  
 
console.log(studentNames);  
// [ 'Amit', 'Swetha', 'Ram', 'Shiv' ]

Reduce

The Reduce function also runs a callback function for each element of an array, which is same as Map function. However, the difference here is that reduce passes the result of callback from one array element to another element.

var studentData = [  
  { id: 1, name: 'Amit', marks: 50 },  
  { id: 2, name: 'Swetha', marks: 80 },  
  { id: 3, name: 'Ram', marks: 60 },  
  { id: 4, name: 'Shiv', marks: 70 }  
];  
 
var totalMarks = studentData.reduce((total, student) => {  
 return total + student.marks  
}, 0);  
 
// more simpler 
var totalMarks = studentData.reduce((total, student) => total + student.marks, 0);  
 
console.log(totalMarks);

Filter

In the case that you want to filter some elements from an array, then we can use the filter function.

var studentData = [  
  { id: 1, name: 'Amit', marks: 50 },  
  { id: 2, name: 'Swetha', marks: 80 },  
  { id: 3, name: 'Ram', marks: 60 },  
  { id: 4, name: 'Shiv', marks: 70 }  
];  
 
var marks = studentData.filter((student) => {  
 return student.marks == 80  
});  
 
// more simpler 
var marks = studentData.filter(student => student.marks == 80);  
 
console.log(marks);