Reduce method not clear

Question

So, I started playing with reduce() and I realised I can pass an Object as the first element of the method and I saw a couple of examples and this is one of them.
const arr = ['y', 'n', 'y', 'y', 'n'];

let test = arr2.reduce((sum, val) => {
    sum[val] = (sum[val] || 0) + 1;
    console.log('sum of val', sum[val], 'value', val)
    return sum;
}, {})

I added that console log so I can see what is going on, but I cant figure it out. HOW DOES THE METHOD KNOW? How does it add that val (which is n or y) in the object and followed by it add the sum of how many of identical elements exists in the array. How does that sum become for example {y: 20} - assuming there are 20 y's in an array.
Im confused by it, at first it seemed simple but I guess its not.

Yousaf · Answer

.reduce() takes two arguments

callback function
initial value (optional)

In your case, empty object literal {} is the initial value. If initial value is supplied, it is passed as the first argument to the callback function.
Second argument to the callback function of .reduce() is the current element of the array on which .reduce() is called. In first iteration, val is the first element in the arr array, i.e. 'y'.
sum[val] = (sum[val] || 0) + 1;

In each iteration, above statement will add value of val as a key in the sum object (initial value) and its value is 0 + 1 if sum[val] is undefined or sum[val] + 1 if sum[val] is defined.
How your code is executing:
When callback is called for the first time, sum is {} and val is 'y'. Since sum[val] or sum['y'] is undefined, 'y' is added as a key in sum and its value is 1. Same thing happens when callback function is called second time. After 2 calls, sum looks like { y: 1, n: 1 }.
In third call, since sum[val] is equal to 1, so previously added key y is overwritten with sum[val] + 1 which evaluates to 1 + 1. So after third call, sum looks like { y: 2, n: 1 }. Same thing happens in the subsequent calls to callback function.

CherryDT · Answer

It doesn't "know", you do it, here: sum[val] = (sum[val] || 0) + 1;
sum is the empty object in the first iteration, and then it's the one returned from the previous iteration (which is the same, due to return sum;). And val is the current value ('y' or 'n').
So, in the first iteration, sum will be {} and val will be 'y'. This line will then set sum['y'] = 1 because it essentially does sum['y'] = (sum['y'] || 0) + 1 - and sum['y'] is undefined at that point, so you'll have (undefined || 0) + 1 which is 0 + 1 which is 1.
The next time the same happens for 'n'.
And the third time, sum['y'] will be already 1 from before, so that expression becomes (1 || 0) + 1 which is 1 + 1 which is 2, so you get sum['y'] = 2.
And so on.
See this screencast from a debugger: https://recordit.co/FVkXjW1b5y

Reduce method not clear

2 Answers

Add your own answers!

Ask a Question