ES6: Rest Parameter with Function Parameters

JavaScript
1

Tell us what’s happening:
I dont understand how the return statement knows where (a, b) come from? I thought …args returns an array?

I do see on this forum that (…args) is orange, also the (a, b) is also orange in the return statement signifying a link…

what happens when more arguements are provided?

do the parantheses around a, b signify the link between the parameters of a function in every function?

I feel like im spending a lot of time attempting to learn code, but sometimes I dont understand seemingly simple core concepts :confused:

Your code so far


const sum = (...args) => {

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

Your browser information:

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

Challenge: Use the Rest Parameter with Function Parameters

Link to the challenge:

2

Yes, args is an array. In the return statement you are using the reduce array method to add up all of the numbers in args. The reduce method takes a function as its argument, so (a, b) are the parameters for that function. You could rewrite the sum function as follows:

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

Notice how I declare the function passed into the reduce method first and then pass that function into reduce by name. (a, b) are just named parameters for the function, you could call them anything you want. The reduce method will return a single value (hence the name reduce) and that is the value being returned by sum.

3

so this will ignore all arguments after the first two entries into the sum function correct?

4

no, the rest parameter will take all arguments passed in the function and make it an array

the reduce method is an array method and in that specific implementation will sum all elements in the args array

5

The arguments you pass into the sum function are gathered up and placed into an array. None of them will be ignored and they will all be placed into the array. This is what ...args is doing. So if you call the sum function as:

sum(1,2,3,4,5,6);

Then those six numbers passed into sum are placed in the the args array inside the body of the function (i.e. args = [1, 2, 3, 4, 5, 6]). This is what allows you do use the reduce method on args, since it is an array of numbers.

6

i ask because the return statement only stated (a + b)

7

OK, you are referring to the helper function passed into the reduce method, not the arguments passed into the sum function. These are two separate things and are not really related. It seems the issue here is that you don’t quite understand how the reduce method works. That’s OK, it can be a little tricky if you are not used to such things. In short, it helps you reduce the array down to a single value. But it doesn’t know how to do that so you have to pass in a helper function to tell it how.

The helper function technically takes four arguments but in practice you usually only use the first two, which are the accumulator and the current value. I can understand why using a and b might be a little confusing because they aren’t very good descriptors for what they represent. So you can rewrite the helper function as:

(accumulator, currentValue) => accumulator + currentValue

The reduce method goes through each value in the array and applies the helper function to it. The accumulator value is the value returned from the previous call of the helper function. Since there is no previous call for the first array item, you pass in the starting value for the accumulator when you call reduce (that is what the second argument to reduce does, sets the accumulator to 0). The currentValue is the value of the array item that reduce is applying the helper function to.

So in my example above, reduce first applies the helper function to the first item in the array, which will return 1 because:

accumulator + currentValue for the first array item is 0 + 1

Remember that accumulator = 0 because that is the default value we passed in for it when calling the reduce method.

Then reduce applies the helper function to the second item in the array which will return 3 because:

accumulator + currentValue for the second array item is 1 + 2

Remember that accumulator now equals 1 because that is the value returned by the previous call to the helper function.

And this continues to the end of the array at which time reduce will return a single value.

If this is still not making sense feel free to add some console.logs inside of the reduce helper function so you can see what the values of the parameters are as reduce goes through the array.

8

A more understandable way of writing that (a, b)=> function might be:

// our reducer function...
const sumFunc = function(runningTotal, valueToAddToIt){
  return runningTotal + valueToAddToIt;
}

// and when we use it in the reduce, what 
//  you've been seeing as a is now runningTotal,
// and b is now valueToAddToIt. 
//  the trailing zero below is the initial value for
//  runningTotal.
return args.reduce(sumFunc, 0)

The reduce function takes up to four parameters, but usually we only worry about the first two.

  1. The accumulator, passed along on every member of the array.
  2. The current array member.
  3. (Optional) the index position of the current array member.
  4. (Optional) The original array, in case we need to refer back to it in our reducer.

So a is the first parameter above, and b is the second. We aren’t using the third or fourth, so we don’t define them.