All for One explainer

The aim of this puzzle: Complete the arrow function in .reduce() so the totalCost can be calculated.

Walkthrough of the solution: When the starter code runs, the totalCost has a value of undefined. It should be a number, the sum of all the values in prices. The way totalCost is being calculated is: take the prices array and .reduce() it.

.reduce() is similar to .map() except it doesn’t return an array of all the results. It uses another parameter called an “accumulator” that has its value updated by each item. In this puzzle, updating the accumulator just means adding the current item to it. The final value of the accumulator will be the value returned by the .reduce() call.

The .reduce() uses a callback function as an argument. We’re using an arrow function as the callback. It should have 2 parameters: a variable (the accumulator) that will store the sum as it’s getting added up, and a variable to store the current item. The accumulator in our arrow function is called sum and our current price will be stored in the price parameter.

The code block {} of the arrow function should add the current price to the accumulated sum, and that should be returned. So, return sum + price, is the command.

Sample code solution:
(Tap below to reveal)

import { hours, prices } from 'grasshopper.store';

console.log(hours);
let totalHours = hours.reduce((today, sum) => {
  return today + sum;
});
console.log('Total Hours: ' + totalHours);

console.log(prices);
let totalCost = prices.reduce((price, sum) => {
  return price + sum;
});
console.log('Total Cost: ' + totalCost);

JavaScript Concepts: Code Block (arrow function), console.log(), .reduce()
Additional Code (hidden code that runs before the puzzle’s code):

let groceries = [
    {name: 'Grasshopper Gumdrops', price: 4},
    {name: 'Bug Juice', price: 8},
    {name: 'NaN-grain Bread', price: 15},
    {name: 'Bookworms', price: 16},
    {name: 'Nulled Cider', price: 23},
    {name: 'Array.pop() Corn', price: 42}
];

const prices = groceries.map(item=>item.price),
const hours = [8,8,6,0,8,8,12]
3 Likes

It’s said in the explanation, that the reduce method uses a callback function. My question is, when did we declare on that function, which is now getting called back?

Hey there,

The function is being defined right in the parentheses of .reduce(). When a function is declared like this, it’s called an anonymous function (meaning it has no name).

These are the functions in the puzzle:

(today, sum) => {
    return today + sum;
}
(price, sum) => {
    return price + sum;
}

Hope this helps!
Ben

Both this puzzle and also the What’s the Result? puzzle seem to have stray 0, which is not in the solution.

1 Like

Hey there, thanks for letting us know. Try sending in a bug report by tapping/clicking the 3-dot menu in the top-right and selecting “Send Feedback”.

Thanks!
Ben

1 Like

Thanks, maybe I will do the whole Arrays course again sometime soon, and flag the stray 0s!

Hi, can you tell me more about number 0 which I don’t see in your sample solution. Is that the Starting Value?
Can we chose keep it or not in the .reduce ?
Thanks.

Hello! Do all anonymous functions use the arrow? Also, if these are the function, are we creating and ‘‘calling’’ a function at the same time? If so, can we do that with non- anonymous functions?
That’s a lot of questions but I want and need to know.

what is the role of 2nd argument of the .reduce() method here? It is set to 0 here in the programs. But what will it be if this argument is 1 or 2 or something else?
Is this index of starting element of the array? @Grasshopper_Ben or somebody else, Please help.
Thank you