Could you please help me understand what is happening in this code more completely? The Rest and Arrow functions are thrown at us kind of fast and I am not sure I follow what is happening.
const sum = (...args) =>
Sum is a function which takes multiple arguments ...argument just signifies that the function can expect multiple variables, but we don’t know precisely how many.
return args.reduce((a, b) => a + b, 0);
Reduce is another function that uses variables a, b
A is previous value?
B is current value?
This is where I get lost. It just throws in a completely unknown function that is somewhat difficult to understand. I tried to read the documentation but was a little lost.
From what I can tell reduce is a function that adds all the numbers in an array together and returns their sum. But I don’t get what ((a, b) => a + b, 0) is doing.
Thank you for your time.
**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/101.0.4951.64 Safari/537.36
Challenge: Use the Rest Parameter with Function Parameters
a and b really aren’t the best parameter names for a reduce function, IMHO. If we rewrite it as:
args.reduce((acc, el) => acc + el, 0);
We can break it down a bit better.
The first argument in the reduce callback is the accumulator - it’s the value that each iteration returns, and will be the final return value after reduce has gone through the entire array.
The second argument is the element of the array that the current iteration is looking at.
Then, the 0 (which is the second argument of reduce - not the second argument of the callback… confusing right??) is the initial value to assign to the accumulator.
So if we break this down in steps:
[1, 2, 3].reduce((acc, el) => acc + el, 0);
The first iteration would look at the 1 element: (0, 1) => 0 + 1 returning 1 for the next accumulator value.
The second iteration would look at the 2 element: (1, 2) => 1 + 2 returning 3 for the next accumulator value.
The third iteration would look at the 3 element: (3, 3) => 3 + 3 returning 6 for the next accumulator value. Because this is the final step, our reduce would return 6.
It sounds like the reduce() is what is confusing you? That’s perfectly normal, even for people with more experience.
Wheat reduce() does is take an array and turn it into a single value. It iterates over the array one item at a time and updates that single value based on that current item. Documentation will call the first argument the “previous value”, but I call it “the accumulator” because it’s that single value so far. Let’s walk through the summing example.
We provide 0 as the initial value, so first we have currSum equal to 0 and currItem equal to 1. 0 + 1 = 1, so that becomes the value of currSum for the next iteration.
currSum is 1 and currItem is 2. 1 + 2 = 3, so now currSum is 3 for the next iteration.
currSum is 3 and currItem is 3. 3 + 3 = 6, so that is the new value of currSum.
We have now reached the end of the array. We have reduced it to the single value 6. That value is now in the variable sum
The 0 or 1 in those cases are only the initial value. They aren’t applied to every iteration. Usually the reason you provide something there is to make sure that the accumulator is the right data type (number, string, array, etc).
If you’re ever trying to figure out what the result of running a particular function will do, then the best way to find an answer is always to run it! You can open up the console of your browser and put in the function, use a node terminal on your computer, or an online service like replit.com.
One last question, can I choose the element that the reduce function starts at? If I wanted to ignore the first number in the array and only return all values after that, how would I do it?
