Use the Rest Operator with Function Parameters I have a question

Tell us what’s happening:
I still don’t understand how the code below works, why does it produce a result of 6, can someone explain it to me, thanks.

Your code so far


const sum = (function() {
  "use strict";
  return function sum(x, y, z) {
    const args = [ x, y, z ];
    return args.reduce((a, b) => a + b, 0);
  };
})();
console.log(sum(1, 2, 3)); // 6

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) coc_coc_browser/77.0.126 Chrome/71.0.3578.126 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-the-rest-operator-with-function-parameters/

That answer is an awfully roundabout way of summing three numbers. But what if you get four? Your sum function is expected to work with any number of parameters.

A function declared using the spread operator, e.g. function sum(...args) will receive all its args in one array (named args). At which point you have the right solution with reduce. The description in the challenge should also give an example of using the spread operator in a function declaration.

1 Like

Thank you for the reply, but I want to ask how this code works and how it can return the result of 6

// my code
const sum = (function() {
“use strict”;
return function sum(x, y, z) {
const args = [ x, y, z ];
return args.reduce((a, b) => a + b, 0);
};
})();
console.log(sum(1, 2, 3)); // 6

Well, to be blunt, you code doesn’t work, at least not as required by the challenge. Or more to say it only works for three args, which doesn’t fulfill the requirements. Let’s ignore the unnecessary IIFE and focus on the sum function:

function sum(x, y, z) {
  const args = [ x, y, z ];
  return args.reduce((a, b) => a + b, 0);
};

The first line of this function is const args = [x, y, z]. This is making an array of three items, namely the arguments to the function (and it’s where you’re going wrong: you need the ...args declaration I mentioned earlier). The second line, the reduce call, is where things get interesting. reduce is a higher order function that is pretty confusing at first, but turns out to be one of the most powerful tools you’ll use. I’m not very good at explaining reduce in a short forum post, but I highly recommend you check out “A Guide to the Reduce Method” at https://medium.freecodecamp.org/reduce-f47a7da511a9

The basic idea of reduce is that you’re collapsing an array down to a single value, using a callback function that takes your “accumulator” value (which starts off as the second argument to reduce) and a single item from the array. For each element of the array, reduce calls your callback function, passing the current accumulator and the current element, and the callback should return a new accumulator. At the end of reduce, it returns the final value of the accumulator. Again, this description is pretty hard to follow, being so short, but the link I gave you will explain it better, and it even explains how it works for summing an array of numbers.

For technical documentation on the reduce method, see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

1 Like

yeah, i got it, thank you.