Arrow function doubt

Hi,

So i came across this line of code in “Rest parameter chapter”

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

now i understood the arrow function in previous chapters, but what i dont understand in the above code is that “0” . I mean (a,b) is the function arguments , whereas a+b is the statement to be excecuted in the function. So whats the 0 for ?

Nothing to do with arrow functions, it’s the second parameter of the reduce function

someArray.reduce(firstParameter, secondParameter);

Where firstParameter is a (non-optional) callback function and secondParameter is the (optional) starting value.

1 Like

Thanks. So, i still haven’t completely wrapped my head around this - but in this case, the secondParameter stands for “currentValue” and firstParameter for “accumulator”

Yes [putting aside how reduce works] it’s just a function that takes two arguments, it’s not a new syntax that hasn’t been introduced (function (arg1, arg2)).

Reduce takes an accumulator (some value, could be anything) and the current value, and runs a function on those two. Then the result of that is the new accumulator, and the function get run on that & the next value. Then the result of that is the new accumulator, and the function gets run on that & the next value and so on.

The second argument is the initial value to use for the accumulator.

If you miss out the second argument, reduce will assume the first value in the array is your starting accumulator.

[1,2,3].reduce((acc, curr) => acc + curr);

acc is 1 (first value in array),
curr skips to next value, so 2.
1 + 2 is 3.

acc is 3,
curr is 3.
3 + 3 is 6.

Finished,
return acc,
6

[1,2,3].reduce((acc, curr) => acc + curr, 10);

acc is 10
curr is 1
10 + 1 is 11

acc is 11
curr is 2
11 + 2 is 13

acc is 13
curr is 3
13 + 3 is 16

Finished
Return acc
16

1 Like

now i get it. So that accumulator and currentValue aren’t traditional “arguments” but follow the rule you mentioned above. I was breaking my head in figuring out that.

Well, they are “traditional” arguments - they are just arguments being passed to that callback function. They change on each iteration, but they are still just parameters.

But yeah, when you’re starting out, reduce is weird. And callback functions seem like magic.

A good exercise is to write your own prototype methods, your own version of map, filter, sort, and reduce. That was when it really clicked for me.

And I’ve run into a few mid-level developers to whom I had to explain how reduce works.

Your confusion is normal. Just keep at it.

Thanks for that! Yeah its a bit counter-intuitive to wrap your head around - i mean, yeah i can take up the concept abstractly like … it returns a total value (sum/multiply/divide,etc) for the array being reduced, and that index parameter lets you control the starting point. But yeah, still visualizing the flow the method is bit weird atm

Maybe helps to show how it works explicitly?

callback has to be a function that takes the value of accumulator + the current value you’re on in the array (+ optionally the current index + the actual array itself, it’s sometimes useful to know those) and returns a new value for accumulator.

function reduce(
  arr,
  callback,
  accumulator
) {
  // This is where the loop starts from.
  // If accumulator is undefined, this needs to
  // be 1, so define it up-front:
  let i = 0;

  // If the last parameter (the starting value
  // for the accumulator) is undefined, need to
  // set it to the first value in the array:
  if (accumulator === undefined) {
    accumulator = arr[0];
    i = 1;
  }

  // Then loop through the array, updating the
  // value of accumulator by running the 
  // callback function:
  for (i; i < arr.length; i++) {
    accumulator = callback(accumulator, arr[i], i, arr);
  }
  
  // Finally, return whatever the final value
  // of the accumulator is:
  return accumulator;
}

Then like

reduce([1,2,3], (acc, value) => acc + value)
// 6
reduce([1,2,3], (acc, value) => acc + value, 0)
// 6
reduce([1,2,3], (acc, value) => acc + value, 10)
// 16

i understood everything in that code except for that callback function. I mean where have you defined it? or is it a predefined function?

No it’s just a function. If you look at the documentation for reduce, the callback has to be a function that takes up to four arguments in the following order:

Non-optional:

  • a value for an accumulator
  • the current value in the array

Optional:

  • the current index in the array
  • the array itself

And whatever it returns will be the next value for the accumulator.

As long as it has those first two arguments, then it can be anything. If you return something weird (like undefined) instead of what next value of the accumulator, the overall reduce operation probably won’t work properly, but yeah, can be anything

In the example of your first post, the callback function is this:

(a, b) => a + b;

If the arrow syntax is confusing, you can rewrite it:

function(a, b){
  return a + b
}

That’s just how .reduce is designed. It needs a callback and optionally a starting value for the accumulator:

let reduced = myArray.reduce(callback, startValue)

I understand now. Thanks!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.