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

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.

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)

1 Like

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?

It is destructuring and renaming the object properties.

Unpacking properties from objects passed as a function parameter

1 Like

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

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.