Can anyone please explain for me the .reduce method in this code?

JavaScript
1

Continuing the discussion from freeCodeCamp Challenge Guide: Use the reduce Method to Analyze Data:

Here’s the solution 2’s code:

function getRating(watchList) {
  // Add your code below this line
  const nolanData = watchList
    .reduce((data, { Director: director, imdbRating: rating }) => {
      if (director === 'Christopher Nolan') {
        data.count++;
        data.sum += Number(rating);
      }
      return data;
    }, { sum: 0, count: 0 });
  const averageRating = nolanData.sum / nolanData.count;
  // Add your code above this line
  return averageRating;
}

console.log(getRating(watchList));

First: I didn’t know the callback function in .reduce() can take an object (inside {}) as parameter. What else can it take?
Second: what is data.count, and data.sum? and why “sum” and “count” do not have to be declared first? It’s really confusing.

2

It can take literally anything: reduce takes an array of things and reduces it to a single value. That single value can be of any type – a string, a number, another array, an object, whatever.

That value, in the context of the callback function, is normally called an accumulator. When reduce runs against an array, it goes through each item in the array, gradually building up, accumulating, that output value.

data is what the first parameter of the callback has been called. It’s an object, the value the array is being reduced to, the accumulator. It has two properties, count and sum.

They are. The object containing them is:

watchlist.reduce(/* callback function */, { sum: 0, count: 0 })

It’s the second argument to reduce, it’s the value the reduce operation starts with. Then the callback function takes that value as its first argument (called data)

4 Likes
3

Thank you for your reply. Can you further explain the this part: “{ Director: director, imdbRating: rating }”. In the sytax it’s the current element being processed. What’s the meaning of declaring it like that?

2 Likes
4

It is destructuring and renaming the object properties.

Unpacking properties from objects passed as a function parameter

4 Likes
5

why do we have the if statement on the solution? and can this challenge pass without the if statement??

6

Well, you need to check if the director is the correct one for each film in the array, so yes, you need an if statement.

Reduce takes an array and constructs another value from it incrementally. You start with some value, an accumulator. Then for each element in the array, you add to the accumulator until you get to the the end of the array.

So if you had an array [1,2,3,4,5,6] and you wanted to use reduce to add up the odd numbers. You start with 0 as the accumulator. Then you add the first element, it’s an odd number, accumulator is now 1. Second element is an even number, so don’t add it, accumulator is now 1. Third element is an odd number, add it, accumulator is now 4. And so on.

You use the callback to tell reduce what to do with the accumulator for each element in the array. So above is

if the current element is odd, add it to the accumulator and return the accumulator. if the current value is even, just return the accumulator as-is.

1 Like
7

For {sum:0, count:0}, is this the fourth parameter of the reduce method, which is the callback function of the reduce method? What about the third parameter, which indicates the index of element? That one can be atomically omitted?

8

{sum:0, count:0} is the initial value which is the second parameter to reduce. It is not part of the callback function parameter list.

reduce(callbackFn, initialValue)
9

Mod: edit solution code removed

10

@laurenclark

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like