Undefined variables in arrow functions

[Arcturus3]

I’m having difficulty understanding the arrow function part of the code from the lesson…
args.reduce((a, b) => a + b, 0);

I found this link below which is helpful but it doesn’t explain how the arrow function itself seems to magically figure out what a and b are the first time the code runs. I understand how the reduce method works itself just not how args become a and b inside the anonymous arrow function given that it is a separate function (callback). It would be helpful to see the actual definition of the reduce method but I haven’t found it by googling.

It would really be nice for learning sake to be able to see javascript compiler going line by line with explanation of each action it takes. That way it would be obvious at what point and how args become a variable in the reduce callback.

On this code i have some trouble understanding this part (return args.reduce((a, b) => a + b, 0); })

Let’s walk through it from the top. This is to teach you about the JavaScript “reduce” method, which you can read about here. Basically, reduce takes a whole array of values and condenses them to a single value through a process that the programmer decides. (In this case, it’s adding them all together.) First, we make a function, using ES6 syntax, called “sum”. It takes three arguments, x, y, and z, in parentheses. That’s the first line. In the second line, we take those three arguments, and …

  **Your code so far**

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

  **Your browser information:**

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

Challenge: Use the Rest Parameter with Function Parameters

Link to the challenge:

freeCodeCamp.org

[xynoan]

@Arcturus3

It would be helpful to see the actual definition of the reduce method but I haven’t found it by googling.

With regards to this, have you tried looking it up on MDN?

[lasjorg]

It’s definitely not magic. All array methods pass arguments to the callback. In simple terms, the method loops the array, calls the callback, and passes the arguments. The only real difference is the number of arguments passed to the callback and their values.

reduce(function(previousValue, currentValue, currentIndex, array) { /* ... */ }, initialValue)

map(function(element, index, array) { /* ... */ }, thisArg)

Array.prototype.reduce() - JavaScript | MDN

https://tc39.es/ecma262/#sec-array.prototype.reduce