FreeCodeCamp and JavaScript: the reduce() Function

So, for the next exercise in FreeCodeCamp, I need to take multiple arrays – without knowing in advance how many there are, using the arguments( function in JavaScript, and compare them.  The output is to be the items that are in either set, but not both.  Now, this is easy to do in your head, and in fact is easy to understand, but implementing it should also be easy, except that I’m struggling with doing it.

The hints for the assignment include a description of Symmetric Difference, which is the fancy name for the set operation above, and also a link to the description of the array reduce function for JavaScript.  The array what now, you ask?

MDN helpfully defines it as “The reduce() method applies a function against an accumulator and each value of the array (from left-to-right) to reduce it to a single value” and gives its syntax as:

Statement 1:

arr.reduce(callback[,initialValue])

Ahem, yes, well, thanks a lot, MDN.

So what this is saying, in English, is that it takes the array and “reduces” it to a single value.  For example, your function could be a + b and it would take the first two values, add them together, put the sum in the “accumulator”, and then work its way through the array adding each term to the accumulator until you had the sum of all of the numbers in the array and that would be the single value that was returned.

Now in order to do this, you have to send some arguments.  In this example, MDN uses the following code:

Statement 2:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) { return previousValue + currentValue;});

Clear as mud, if you don’t understand it, but I’m going to unpack it.  The array that we want to reduce is [0, 1 ,2, 3, 4].  We call the function reduce on the array like so:

[0, 1, 2, 3, 4].reduce()

The problem of course is that nothing will happen since we haven’t defined what reduce does.  As noted above, we reduce to return the sum of the whole array.  As noted, we have to send parameters – what are we summing, etc.  So let’s define them.  The first four go in the callback section of the above Statement 1.  They are:

previousValue: This is either the initial value, or the value the function returned previously – in our example, previousValue would start as 0.

currentValue: the element currently being put through the function.  In our example, the first time through, this would be 1.

currentIndex: This is the index of the element currently being put through the function – this is 1 in our example, not 0!

array – this is, of course, the array we’re calling the reduce function on.

Now, we need to define what the function is going to do.  We want it to add all the elements together and return a single sum, so obviously we need an addition statment.  We have defined the inputs to that statement as the previousValue and the CurrentValue, so our statement is previousValue + currentValue  (Mind you, we don’t have to use those variable names – we could use a, b, dude, whatever). We want to return the sum, so:

return previousValue + currentValue;

is what we want as our function.  And there you are, statement 1 is now explained!  When you run it, it steps through like so:

previousValue: 0
currentValue: 1
currentIndex: 1     <– remember, this is the index of currentValue, not previousValue!
Returns: 0 + 1 = 1

Then:

previousValue: 1
currentValue: 2
currentIndex: 2
Returns: 1 + 2 = 3

previousValue: 3
currentValue: 3
currentIndex: 3
Returns: 3 + 3 = 6

And finally,

previousValue: 6
currentValue: 4
currentIndex: 4
Returns: 6 + 4 = 10

And that’s the final value, the sum of 0 + 1 + 2 + 3 + 4!

Now let’s say we want to give an initial value:

[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) {  return previousValue + currentValue;}, 10);

Wait, what?  What’s with that 10 back there?  Well, the function goes in the callback section of Statement 1, which is THEN followed by the initial value, which we are supplying as 10.  The function performs almost the same way, though:

previousValue: 10          <– previousValue here is our initial value of 10
currentValue: 0
currentIndex: 0               <– Note here we DO start with element 0.
Returns: 10 + 0 = 10

previousValue: 10
currentValue: 1
currentIndex: 1
Returns: 10 + 1 = 11

previousValue: 11
currentValue: 2
currentIndex: 2
Returns: 11 + 2 = 13

previousValue: 13
currentValue: 3
currentIndex: 3
Returns: 13 + 3 = 16

Finally:

previousValue: 16
currentValue: 4
currentIndex: 4
Returns: 16 + 4 = 20

And that’s the final value, the sum of 10 + 0 + 1 + 2 + 3 + 4!

Lastly, let’s say we want a different function instead of adding.  MDN uses flattening an array of arrays, or in plain english, take all the elements of all the arrays and stick ’em in one big array.  The code:

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b);}, []);

Output flattened is [0, 1, 2, 3, 4, 5].

This looks different but works the same way.  As in:

previousValue: [0,1]
currentValue: [2,3]
currentIndex: 1
Returns: [0,1]concat[2,3] = [0, 1, 2, 3]

previousValue: [0, 1, 2, 3]
currentValue: [4,5]
currentIndex: 2
Returns: [0, 1, 2, 3] concat[4,5] = [0, 1, 2, 3, 4, 5]

And there you have it, the single value returned is [0, 1, 2, 3, 4, 5], the flattened array.

That’s the basics.  More later!

Advertisements

3 thoughts on “FreeCodeCamp and JavaScript: the reduce() Function

  1. Good write up, this helped clear up reduce for me.

    Should the
    ‘And that’s the final value, the sum of 20 + 0 + 1 + 2 + 3 + 4!’
    actually say
    ‘And that’s the final value, the sum of 10 + 0 + 1 + 2 + 3 + 4!’

    1. Just an FYI, if you use the ‘Reply’ under the comment it will notify the person that you responded. Posing a new comment doesn’t automatically do that.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s