Javascript map, reduce, filter methods✌

Understanding JavaScript map, reduce, filter methods.

javascript array map, reduce filter methods

Why we need it ❔

Often we come across cases where we need to perform some operations inside JavaScript array or array of objects, as someone new to javascript,the first thing that always comes to our mind is running the array or array of objects in for/forEach loop in order to iterate the elements of array and perform the custom operations, but javascript offers us a simpler way to do a lot of things with lesser lines of code, among those provisions provided by javascript are map, reduce, filter methods that make our task of working with array/array of objects easy. Although there are numerous javascript methods for working with arrays, here we will focus on three of the most used i.e map, reduce, filter.

The simple one line definition 🎯

1️⃣ map — used to modify elements in an array and get new array with modified elements.

2️⃣ reduce — to perform some operation in the array and return a single computed value.

3️⃣ filter — to get a subset of an array that satisfies certain condition.

Let’s understand each of them one by one 🕵️‍♀️

map📌

map is used modify current elements in your array/array of objects. In traditional programming we use for loops but here just map method of javascript will do the thing for us.

Let’s take an example

Consider we have an array of numbers and we wish to add each element of array by 5, we can simply do this as:

let numArr = [5,10,15,20];
numArr = numArr.map(element => {
return element + 5
});
console.log(numArr);

Here numArr is array of numbers, we call map method in our numArr to iterate over each element, followed by a callback function that adds 5 to each element of numArr, we get the following output

[ 10, 15, 20, 25 ]

Using map method with array of objects

Let’s consider we have array of objects with first name and last name and we need to have full name of employee using our existing array of objects, here’s how we can do it.

var employee = [{fname: ‘Rahil’, lname: ‘Shaikh’},{fname: ‘Zahwa’, lname: ‘Ansari’}];
var empfullName = employee.map(emp => { 
return `${emp.fname}  ${emp.lname}`
});
OR
var empfullName = employee.map(emp => { 
return emp.fname + ' ' + emp.lname 
});
console.log(empfullName);

Output: [ ‘Rahil Shaikh’, ‘Zahwa Ansari’ ]

Here employee is an array of object that has fname and lname, we create an new array by calling a map method that concats employee fname and lname to return the full name of the employee.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

reduce📌

reduce method is used to compute a single value out of elements in an array.

let’s again take the example of same numArr that has array of numbers, suppose we need to calculate the sum of numArr, here we can use reduce method for this operation.

let numArr = [5,10,15,20];
const sum = numArr.reduce((total, currentValue) => {
return total + currentValue
});
console.log(sum);

Output: 50

How it works:

reduce accepts two parameters, total and currentValue

in first iteration (index 0), total is the first element of our array i.e 5

currentValue is 10, which is the next value of current iteration (index 1).

once we are done with sum of first iteration i.e 5 + 10 = 15, total has a value of 15 now and currentValue will be the value of next element after 10 i.e 15 (index 2), this gives the sum 15+15 = 30

total now has value of 30 and curretValue is 20 (index 3), this gives the result 30+20 = 50, since there are no more elements in array the iteration stops and the result of 50 is returned as result to the sum variable.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

filter📌

filter is used to create a new array that contains a subset elements of original array based on some condition.

let’s take an example

We have an array of some random numbers say randomNum and we need to create a new array that contains elements that are greater than 10 from the randomNum array, here’s how we can use filter method to achieve this.

const randomNum = [1,18,45,6,9,33,4];
const numGreaterThan10 =  randomNum.filter(num => {
return num > 10
});
console.log(numGreaterThan10);

Output: [ 18, 45, 33 ]

here we apply filter method to our randomNum array, filter will iterate over each element of randomNum array and return the elements that are greater than 10.

let’s us now take an example of applying filter method in array of objects

We have an array of objects that has country and city, we need to filter this array of objects to return just the cities of country India,

let places = [{country: ‘India’, city: ‘Mumbai’},{country: ‘USA’, city: ‘New York’},{country: ‘Turkey’, city: ‘Istanbul’},{country: ‘India’, city: ‘Delhi’},{country: ‘France’, city: ‘Paris’}]
const indianCities = places.filter(place => { 
return place.country === ‘India’
});
console.log(indianCities);

Output: [
{ country: ‘India’, city: ‘Mumbai’ },
{ country: ‘India’, city: ‘Delhi’ }
]

filter method iterates over each element i.e object of places and checks if country of the place is India, if true then it return the values.

🔷➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖➖🔷

Now you know when to use map, reduce and filter methods in array, if this article was helpful, hit some likes👍 and share the knowledge🤘 .