This content originally appeared on DEV Community and was authored by Prosen Ghosh
.filter()
, .map()
, .reduce()
, can be operated separately or can be chained and used together. This method operates the array and transforms it into a new result.
Filter
filter()
creates a new array of elements that pass the implemented test of the callback function with them.
const customers = [
{
name: "Mr. A",
age: 21
},
{
name: "Mr. B",
age: 35
},
{
name: "Mr. C",
age: 18
},
{
name: "Mr. D",
age: 50
},
{
name: "Mr. E",
age: 25
}
];
const result = customers.filter(function(elem){
return elem.age >= 20 && elem.age <= 35;
});
console.log(
JSON.stringify(result)
);
Result
[{"name":"Mr. A","age":21},{"name":"Mr. B","age":35},{"name":"Mr. E","age":25}]
Here we have filtered the customers array. We will get those customer returns whose age is between 20
to 35
(inclusive).
If we convert the above code to the fat arrow function of ES6, then the code will be as below.
const result = customers.filter((elem) => elem.age >= 20 && elem.age <= 35);
console.log(
JSON.stringify(result)
);
Result
[{"name":"Mr. A","age":21},{"name":"Mr. B","age":35},{"name":"Mr. E","age":25}]
Map
map()
creates a new array and calls a callback function for each element.
const customers = [
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "Joe",
lastName: "Smith"
},
{
firstName: "Bob",
lastName: "Smith"
},
{
firstName: "Mike",
lastName: "Smith"
},
{
firstName: "Juan",
lastName: "Smith"
}
];
const result = customers.map(function(elem) {
return {
fullName: `${elem.firstName} ${elem.lastName}`
}
});
console.log(
JSON.stringify(result)
);
Result
[{"fullName":"John Smith"},{"fullName":"Joe Smith"},{"fullName":"Bob Smith"},{"fullName":"Mike Smith"},{"fullName":"Juan Smith"}]
Here customers have firstName
and lastName
. We can create each customer's fullName
using map()
method and it will return a new array.
If we convert the above code to the fat arrow function of ES6, then the code will be as below.
const result = customers.map((elem) => ({ fullName: `${elem.firstName} ${elem.lastName}` }));
console.log(
JSON.stringify(result)
);
Result
[{"fullName":"John Smith"},{"fullName":"Joe Smith"},{"fullName":"Bob Smith"},{"fullName":"Mike Smith"},{"fullName":"Juan Smith"}]
We can return any type to the callback function after mapping (Array, Object, String, etc). Let's try a code
const customers = [
{
firstName: "John",
lastName: "Smith"
},
{
firstName: "Joe",
lastName: "Smith"
},
{
firstName: "Bob",
lastName: "Smith"
},
{
firstName: "Mike",
lastName: "Smith"
},
{
firstName: "Juan",
lastName: "Smith"
}
];
const result = customers.map(function(elem) {
return elem.firstName.concat(" ", elem.lastName).length;
});
console.log(
JSON.stringify(result)
); // [10,9,9,10,10]
Here we concatenate the customer's firstName
, lastName
and return it's length.
Reduce
The reduce()
method runs a reducer function for each element and returns a single result. The filter method includes a callback function and an initial value in it's argument.
const items = [
{
quantity: 1,
price: 20
},
{
quantity: 5,
price: 200
},
{
quantity: 7,
price: 100
}
];
const total = items.reduce(function(accumulator, currentValue){
return accumulator + (currentValue.quantity * currentValue.price)
}, 0);
console.log(total); // 1720
Here we have set 0
to the accumulator.
We get a single result total by multiplying the quantity and price of each item and adding it to the accumulator.
If we convert the above code to the fat arrow function of ES6, then the code will be as below.
const total = items.reduce(
(accumulator, currentValue) => accumulator + (currentValue.quantity * currentValue.price),
0
);
console.log(total); // 1720
filter, map, reduce
Now we will try to combine filter, map, reduce.
Let me say a case before coding
We have orders data of an eCommerce business. We have to find out from those orders that the status of the order is ACCEPTED
and the customer's age is between 20
to 30
, how much money we have been able to sell to them.
We will first find the result using a function, then we will find the result by chaining those 3 methods.
const orders = [
{
customer: {
id: "A1",
age: 20
},
status: "ACCEPTED",
items: [
{
quantity: 1,
price: 20
}
]
},
{
customer: {
id: "B1",
age: 25
},
status: "ACCEPTED",
items: [
{
quantity: 5,
price: 200
}
]
},
{
customer: {
id: "A1",
age: 20
},
status: "REJECTED",
items: [
{
quantity: 1,
price: 20
},
{
quantity: 5,
price: 200
},
{
quantity: 7,
price: 100
}
]
},
{
customer: {
id: "C1",
age: 35
},
status: "ACCEPTED",
items: [
{
quantity: 1,
price: 10
},
{
quantity: 5,
price: 250
},
{
quantity: 7,
price: 50
}
]
},
{
customer: {
id: "A1",
age: 20
},
status: "ACCEPTED",
items: [
{
quantity: 3,
price: 200
}
]
}
];
So first we have to find out the ACCEPTED
order and all the customers between the age of 20
to 30
.
const filterOrders = orders.filter(function(elem){
return elem.status === "ACCEPTED" && elem.customer.age >= 20 && elem.customer.age <= 30;
});
console.log(filterOrders);
Result
[{"customer":{"id":"A1","age":20},"status":"ACCEPTED","items":[{"quantity":1,"price":20}]},{"customer":{"id":"B1","age":25},"status":"ACCEPTED","items":[{"quantity":5,"price":200}]},{"customer":{"id":"A1","age":20},"status":"ACCEPTED","items":[{"quantity":3,"price":200}]}]
Now we will calculate the total price of each order.
const mapOrders = mapOrders = filterOrders.map(
function(elem) {
return elem.items.reduce(function(accumulator, currentValue){
return accumulator + (currentValue.quantity * currentValue.price);
}, 0)
}
);
console.log(mapOrders); // [20, 1000, 600]
Now if we add all the values, we will get the result.
const totalSell = mapOrders.reduce(function(accumulator, currentValue){
return accumulator + currentValue;
}, 0);
console.log(totalSell); // 1620
Now we will try to do this whole thing by chaining the methods with ES6 fat arrow function.
const totalSell = orders
.filter(elem => elem.status === "ACCEPTED" && elem.customer.age >= 20 && elem.customer.age <= 30)
.map(elem => elem.items.reduce((accumulator, currentValue) => accumulator + (currentValue.quantity * currentValue.price), 0))
.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(totalSell); // 1620
This content originally appeared on DEV Community and was authored by Prosen Ghosh
Prosen Ghosh | Sciencx (2021-06-27T06:07:35+00:00) Use of filter(), map(), reduce() in JavaScript. Retrieved from https://www.scien.cx/2021/06/27/use-of-filter-map-reduce-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.