An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Slashdot
- Engadget
- Web Designer Wall
- Abduzeedo
- Noupe
- Fudge Graphics
- 24 Ways
- CSS Tricks
- Spyre Studios
- Hashedout
Help Webnuz
Referal links:
Use of filter(), map(), reduce() in JavaScript
.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); // 1720Here 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); // 1720filter, 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); // 1620Now 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); // 1620Original Link: https://dev.to/prosenghosh25/use-of-filter-map-reduce-in-javascript-8cm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To