Why Does Reduce Not Print The First Value?

I am trying to learn how to use reduce here and this will log only b,c,d ['a', 'b', 'c', 'd'].reduce(function(acc, cur){ console.log(cur); return cur; }) I don't understand wh

Solution 1:

The point of reduce is that it takes each element in turn from the array, performs a binary operation on that element and the output from the previous iteration (the "accumulator"), and then repeats the process until the input array is exhausted.

That is, to say, given [a, b, c, d].reduce(f) it does:

   f(a, b)
-> f(f(a, b), c)
-> f(f(f(a, b), c), d)

You're only logging the second parameter, so your a never appears.

(For convenience, I've ignored the extra index and array parameters that are passed to f)

The optional "initial value" parameter that you have not supplied, is used if you want to use something other than the first element in the array as the first left hand operand. If you do not supply it, then, as you have found, the first values of acc and cur will be "a" and "b"

The reduceRight function takes the arguments from the other end of the array:

f(c, d)
-> f(b, f(c, d))
-> f(a, f(b, f(c, d)))

Solution 2:

You need to specify an initialValue, if the accumulatior should not be the first element, according of the API of Array#reduce.

initialValue

[Optional] Value to use as the first argument to the first call of the callback. If no initial value is supplied, the first element in the array will be used. Calling reduce on an empty array without an initial value is an error.

['a', 'b', 'c', 'd'].reduce(function(acc, cur){
    console.log(cur);
    return cur;
}, undefined);
// ^^^^^^^^^

Solution 3:

I understand things easier when I see real world examples, so let say we have an array like this:

letproducts= [
    { label:'Product 1', price:5  },
    { label:'Product 2', price:15 },
    { label:'Product 3', price:20 },
];

Then we want to count the total price:

let totalPrice = products.reduce((acc, product) => {
    return acc + product.price;
}, 0); // 0 - initial valueconsole.log(totalPrice);

And it does not log a because if no initial value specified, it will take first element as the initial value.

Solution 4:

As docs mentioned

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

That tell clearly that

['a', 'b', 'c', 'd'].reduce(function(acc, cur){
  console.log(cur);
  return cur;
})

reduce gives acc values each time as a,b,c and cur as b,c,d

each time you get the pairs as a,bb,c, c,d

Solution 5:

For example,

['a', 'b', 'c', 'd'].reduce(function(acc, cur){
  console.log(acc);
  return acc+cur;
})

You will get following:

ab
abc
abcd

array.reduce() takes an one element in the array at a time and produces an output according to the callback function and store it in the accumulator. Therefore for each iteration you'd have the previous result (the accumulator) and the current element to produce the next result. Accumulator value starts with the value of the first element in the array.