Undefined variables in a es6 challenge

Tell us what’s happening:

I had no problem passing the challenge, but there is one thing that’s a little weird in this challenge.
If you look at the code below, you will see a and b and both weren’t previously defined.

Were they defined behind the scenes of the challenge?
Are they just es6 tools?

Can you please tell me what’s going on?

Thanks.

Your code so far


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

console.log(sum(1, 2, 3)); // 6

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36.

Challenge: Use the Rest Parameter with Function Parameters

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

(a, b) => a + b
This is an arrow function being defined. The a,b you see in parentheses is the definition of the two function parameters (variables), while the a + b on the right of the arrow is the function body.

2 Likes

So, within that reduce, there’s a line that goes (a, b) => a+b - that’s an inline function definition. So the a and b are being defined right there, as parameters to that inner function. To expand it out, it might look like

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

So that inner function simply adds two numbers together. But a isn’t just any number, it’s an accumulator, and it’s starting value is set by that 0 after the function. The b, on the other hand, is the current iteration value.

Make sense?

1 Like

@ConnerOw1115 Arrow function syntax was introduced in this previous challenge.

The reduce method takes a callback function. This callback function is written with arrow function syntax.

2 Likes

Thank you guys. I did not see the arrow function’s defining.
It was pretty tricky to catch.

1 Like