 Why is there a 0 in the function and what does .reduce() do?

Tell us what’s happening:
Describe your issue in detail here.

const sum = (...args) => {
return args.reduce((a, b) => a + b, 0);
}

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Challenge: Use the Rest Parameter with Function Parameters

Hello,

it is an optional parameter for the reduce function for the initial value. you can use it for example in case that you want to sum all the arguments and add the result to some value… if you do not need to use it, you can omit it.

[1,2,3,4,5].reduce((a, b) => a + b) will return 15 (1+2+3+4+5=15)
[1,2,3,4,5].reduce((a, b) => a + b, 100) will return 115 (100+1+2+3+4+5=115)

you can check the reduce function here: Array.prototype.reduce() - JavaScript | MDN

Just to be clear, if you omit it, it will use the first element as the starter and skip to the second. This works if you are summing an array of numbers, for example, but will not work if those numbers are in objects.

But yeah, reduce confuses a lot of people. I once had to explain it to a senior dev. Just keep at it, you’ll get it.

2 Likes

.reduce is one of the more powerful array methods, but how it works isn’t extremely clear, and understanding how it works requires some time studying it.

Ultimately .reduce functions as a method that allows you to “reduce the array down to a single variable” you build up over each iteration. This might sound wordy, but here is an example of some code where you “reduce an array down to a single variable”

const getSum = (nums) => {
let sum = 0;
for (let num of nums) sum += num;
return sum;
};
console.log(getSum([1, 2, 3])); // 6

This code iterates over the array of numbers, nums, and adds it to the sum.
So essentially you are “reducing” the nums down to sum, with a starting value of 0.

If you wanted to create the same function using .reduce you’d do the following:

const getSum = (nums) => {
return nums.reduce((sum, num) => {
return sum += num;
}, 0);
};

console.log(getSum([1,2,3]); //6

or if we wanted to be a concise as possible, leveraging how arrow functions work without {}, we can get:

const getSum = (nums) => nums.reduce((sum, num) => sum += num, 0);

console.log(getSum([1,2,3]); //6

In essence, the callback function passed can be used to “update” the “accumulator value” (in the examples sum, or the first argument passed into the callback) with whatever the second argument is (num). Whatever you return from the callback is then used as the next call’s sum value.

So over each call, the function can be used to “reduce” the value of the array down to just that 1 value your passing through (sum).

You originally asked about why 0 is there, that is just the default value. As mentioned above, if this isn’t passed, reduce will automatically take the first value from the array. So in the last example, the first call of the callback, will have sum set as 0. If we didn’t pass 0, the first call of the callback will have sum set as 1, as that is the first value in the array!

The callback for reduce has other arguments that are less used, most of the time you’d use just the first 2 arguments. More information can be found in the official docs linked above on MDN.

In summary reduce is powerful, but requires some playing around with to fully understand.

reduce could be used in more complex cases, beyond just adding numbers, and fit essentially any scenario where you have a loop and a “value” that will be updated/set according to every value within an array.

dont ponder too much on the reduce method as you are early in the lessons and reduce comes a bit later, as well as additional knowledge on the way. The point of the lesson is to teach you of the rest parameter, which can be very handy when working with functions and even if you dont fully understand it right now, just know its there and eventually come back to the lesson, if you find the need to use it.

I love functional techniques like reduce, but I really recommend you don’t use it if you are new to programming… just use a for-loop instead.