Build a Library: Intermediate Javascript project

Hi !
I can’t seem to understand the REDUCE() method in the project. At point 7 I don’t understand the HINT solution:

let ratingsSum = this.ratings.reduce((currentSum, rating) => currentSum + rating, 0);

What’s with that 0 there?
Please help.


reduce() is a common functional pattern that’s also known as fold. Wiki article on that.

Basically you have one operation and an array you want that operation applied to. If we had the ADD operation on [1,2,3,4], reduce would add 1+2, then add (1+2)+3, then add ((1+2)+3)+4, yielding 10. If it were multiply instead, it would do the same, virtually giving 1*2*3*4 = 24 (in this case 4!, 4 factorial).

So how do we write a basic version? Define the operation, and then call it on the array!

let arr = [1,2,3,4]
const add = (x, y) => x + y;
const mult = (x, y) => x * y;
let sum = arr.reduce(add);
let product = arr.reduce(mult);
console.log(sum); //10
console.log(product); //24

To refer directly to what they wrote in the instructions

let arr = [1,2,3,4];
//notice instead of calling sum, they are
//defining the function inside the reduce call
let sum1 = arr.reduce((x, y) => x + y, 0);
let sum2 = arr.reduce((x, y) => x + y); //same thing as sum1
let sum3 = arr.reduce((x, y) => x + y, 1000); //1010

would yield the same thing. The 0 is just an initial value. Trivial in this case, I suspect they just wanted to show the pattern (which is useful later).

For the MDN doc on how it works with javascript specifically Array.prototype.reduce() - JavaScript | MDN


But why they put “rating” as a parameter? “rating” is the previous value or the current value?

In the exercise, you’re getting the average value of the ratings, and in this step you are getting the sum of the ratings before you divide by the total number of elements.

It’s technically an addition function, so I’m not a fan of labeling it rating (because it can, in fact, sum any array). If you want to refactor this in the code you can abstract the add operation and use it to get sums of prices, or anything else.

As I wrote earlier, a way to understand it is that the currentSum is the x value and rating is the y value. It isn’t simply adding them all together in one operation, it’s doing various add operations one after another.

Another way to think about it is if currentSum starts at 0, you have

  • currentSum + rating1 //(=rating1)
  • currentSum + rating2 //(=rating1+rating2)
  • currentSum + rating3 //(=rating1+rating2+rating3)
  • currentSum + rating4 //(=rating1+rating2+rating3+rating4)

You can name it anything that describes what the function does, in this case they chose to be specific. But the important point is where does it get the rating parameter? The array elements.

Even more specifically, let’s say our ratings are stored in an array myRatings = [a, b, c, d], then we have

  • currentSum + a //(=a)
  • currentSum + b //(=a+b)
  • currentSum + c //(=a+b+c)
  • currentSum + d //(=a+b+c+d)

Got it. Thanks a lot!