Understanding The Reduce Method in Splice Challenge

JavaScript
1

Tell us what’s happening:
I managed to pass the challenge for “Basic Data Structures: Remove Items Using splice()”, but I don’t understand the parameters in the reduce method and I would like a more complete understanding. I searched a few questions regarding this challenge, but didn’t find the answer. So, can someone explain how the line…
return arr.reduce((a, b) => a + b); works. I don’t understand what the parameters a and b are.
w3schools says the reduce function works as…
array .reduce( function(total, currentValue, currentIndex, arr), initialValue )
… but then I think that the a would be total and b would be initialValue or currentValue, but that doesn’t add up.

Your code so far
I would have written return arr.reduce(); and I tried it, but the console says ““TypeError: undefined is not a function””


function sumOfTen(arr) {
// change code below this line
arr.splice(2,2);
// change code above this line
return arr.reduce((a, b) => a + b);
}

// do not change code below this line
console.log(sumOfTen([2, 5, 1, 5, 2, 1]));

Your browser information:
Chrome
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Challenge: Remove Items Using splice()

Link to the challenge:
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice

1 Like
2

After the array is spliced you are left with [2,5,2,1]. Reduce means that the function reduces the array into a single value so that it can perform the function for each value of the array. The first 2 arguments in this function are total value and current value. The total value is going to be the initial value or the previously assigned value. The way it is defined in this problem you can think of it as the first 2 arguments given arg[0] and arg[1].

Before the function is executed [2,5,2,1]
After the function is performed on the first value [7,2,1]
second [9,1]
third [10]

This is where it returns the result of the last callback.

1 Like
3

Howdy JoeDel,
Thanks for your response,
I’m not sure I understand, but I have a clarifying question/statement.
I’m thinking you mean that a + b is not a one time process but a repeated process.
So, first a is 2 (arr[0]) and b is 5 (arr[1])…
Then, a is 7 (arr[0] + arr[1]) and b is 2 (arr[2]),
and finally a is 9 ([arr[0] + arr[1] + arr[2]) and b is 1 (arr[3]).
Is this correct? It seems to be a reiteration of your statement…
"The way it is defined in this problem you can think of it as the first 2 arguments given arg[0] and arg[1].

Before the function is executed [2,5,2,1]
After the function is performed on the first value [7,2,1]
second [9,1]
third [10]"

Thanks for your help and if this in not correct could you please tell me where I am mistaken.

4

You are on the right track with thinking it’s a repeated process, and it might help you to think in terms of accumulator and currentValue more than a and b.

For the line you asked consider a hard-coded array and try to log both variables:

const arr = [2, 5, 1, 5, 2, 1];
arr.reduce((acc, curr) => {
    console.log(`Accumulator: ${acc}`);
    console.log(`Current value: ${curr}`);
    console.log(`\n`);
    return acc + curr;
});

You can see how acc literally accumulates the values of the array, storing the values of the addition.

It is quite a complicated subject, and I highly suggest this article on CSS Tricks for a more thorough explanation. It really helped me understand the topic.

1 Like
5

Thanks for the link and the code sample.
The link was a little advanced, but it seemed to confirm the idea of the idea of the meaning of a and b, which I used because of their use in the code. I assume my description of them is correct, but your description of them ass accumulator and current value does make them more clear.
In respects to where I got to in the link, my next question/belief is that the initial value is something that is independent of the array that we are adding up. So, I might use the initial value as something like a bank account and add to it an array of deposits to find the total in my bank account after a series of deposits. Example…

const deposits = [100, 3.50, 21.50, 1001, 99, 75];
let initialBalance = 2000;
newBalance = deposits.reduce((acc, curr, initialBalance) => 
{ return acc + curr + initialBalance}); //not sure how this line would be written

returning 3300 as a total?
I’m unsure about the last line of code, but conceptually I believe this is a practical example of how to use it with an initialValue. Can you tell me if it is indeed a practical example? …and that my concept of a and b is correct, though yes, your terminology of accumulator and currentValue is conceptually easier to understand.

6

You are almost right, but the initial value is included as the second argument of the reduce function (the first one being the function iterating through the array).

const deposits = [100, 3.50, 21.50, 1001, 99, 75];
let initialBalance = 2000;
newBalance = deposits.reduce((acc, curr, initialBalance) => { 
   return acc + curr;
}, initialBalance);

In your snippet initialValue is added with every iteration (not a bad situation for a bank deposit though :smile:)

1 Like
7

Thanks borntofrappe,
So, initialBalance would be outside the curly braces to only be added once?
and following the w3school structure of…
array.reduce( *function(total, currentValue, currentIndex, arr), initialValue* )
one would say the first parameter is a function, which itself could have four parameters (we use 2, total and currentValue), and the second parameter of the reduce function is the initial value as you mentioned?

8

Yes, it seems to be the case.

I tend to use MDN for documentation, and while the naming convention is different, they do show the same number of arguments.

1 Like
9

Thanks for all the help and clearing it up.

1 Like
10

You are on the right track, yes because in the reduce function the first argument always gets reassigned as the total.