Reduce
Can we get the total price of phones?
Yes, with the reduce
function 😏
We are going to calculate the total price of all phones in an array.
First we need an array of phones:
let phones = [
{ model: 'iPhone SE', price: 450.00, color: 'white' },
{ model: 'Samsung S9', price: 900.00, color: 'black' },
{ model: 'LG G7', price: 740.00, color: 'black' }
]
Procedural way
Let's see the procedural approach first
let totalPhonePrice = 0;
for (let i = 0; i < phones.length; i++) {
const phone = phones[i];
totalPhonePrice += phone.price;
}
console.log(totalPhonePrice);
Functional way
We can use the reduce
function:
let totalPhonePrice = _.reduce(phones, (acc, phone) => {
return acc + phone.price
}, 0)
console.log(totalPhonePrice)
There are 2
things to notice here:
acc
stands for the accumulator. This is the value accumulated from each item.- there is
0
passed as the thrid argument. This is again related to the accumulator and is the initial value / the starting point of the accumulator.
TIP
If we don't pass an initial value for the accumulator (in our case 0
), then the default value is the first element of the array.
So, can we leave it out? No! The first item is a Phone
object and JavaScript doesn't know to take its price
attribute only, instead it takes the whole object and it returns a mess 😂
Summary
The reduce
function takes an array and "reduces" / narrows the array to only one value (in our case a number representing the sum of prices).