Could somebody please explain this .reduce function code?

Question

Finding out how many times an array element appears has some great answers, and I really like Oriol's answer but can't seem to figure out the logic.

Here it is:

function countInArray(array, value) {
  return array.reduce((n, x) => n + (x === value), 0);
}
console.log(countInArray([1, 2, 3, 4, 4, 4, 3], 4)); // 3

I've looked at https://www.geeksforgeeks.org/javascript-array-reduce-method/ and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce but I'm afraid I'm still confused by the complexity.

I understand that 0 is the starting total, and that x===1 should be equal to 1 or 0 depending on the truth.

I'm mainly confused with n because I read that n is the return value of the previous function, but there's no previous function in the beginning.

Answer 1

Basically, the following code adds all the elements in an array:

[1, 2, 3].reduce((a, b) => a + b, 0);

The 0 above is the initial value of the accumulator. a is the current value of the accumulator and every loop, the accumulator is updated with the return value of the function.

In your code:

array.reduce((n, x) => n + (x === value), 0);

You are giving the value to be counted. Anything that equates true and is added to a number, will equate to 1, increasing the count.

So, if you have something like:

var value = 5;
var x = 5;
var n = 3;
(x === value) // becomes true
n + (x === value);

So, the above code becomes n + (true) which is technically n + 1.

This way, in your full loop, the value is being counted using an accumulator and returned to you as a sum.

The code below:

array.reduce((n, x) => n + (x === value), 0);

is an equivalent of the below:

var count = 0;
for (var i = 0; i < array.length; i++) {
  if (array[i] === value)
    count = count + 1;
}
return count;

Answer 2

This reduce function count value in array.

.reduce( (n, x) => n + (x === value), 0)

The n is last reducer value (first value is 0 - last reduce argument). The x is current element. The +(x === value) is 1 only if x is equal to value, otherwise it is 0. Because after => we not use braces so we return expression n + (x === value)

Answer 3

The Array.reduce function is used to reduce the Array to a single value. it has two parameters

1. A function used for the reduction this function is passed two values the first is the reduced value of the previous array elements, the second is the current array element.

2. (Optional) An initial value for the reduction, if ignored then the first Array element is used

Example:

var name = ["J", "a", "v", "a"].reduce((a, b) => a + b); // "Java".
var sum = [1, 2, 3].reduce((a, b) => a + b); // 6.
var ret = functionArray.reduce((retArray, func) => retArray.push(func()), []);

Another Cousin of Array.reduce is Array.reduceRight which is basically the same but goes over the array from right to left (from higher index to lower index)

Example:

var name = ["a", "v", "a", "J"].reduce((a, b) => a + b); // "Java".