All for One explainer


#1

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()


#2