I don't understand what is happening in this reduce method?

Tell us what’s happening:
Describe your issue in detail here.

I understand how reduce works, but in this particular example I struggle to understand what is happening. (I am more confident with arrow function syntax)

  **Your code so far**

The following is a cash register in a form of an Array;

let cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];

var register = cid.reduce(
    function(acc, curr) {
      acc.total += curr[1];
      acc[curr[0]] = curr[1];
      return acc;
    },
    { total: 0 }
  );

Could you explain what is happening in general?
And in particular, I understand reduce is used to get the total in the cash register, but I don’t understand what {total: 0} is needed for and what the following does?:

acc[curr[0]] = curr[1]

thank you in advance

It looks like this is adding a property to the object with the name of the first element in the cid element (for example “PENNY”) and a value of the second cid element (for example, 1.01).

The { total: 0 } represents the starting point of the value you will eventually return from the reduce method. Remember how reduce is called. reduce((accumulator, currentValue)=>{ ... }, initialValue) . I intentionally excluded other optional parameters. You can read more about them on the JS documentation page. The initialValue is also optional. If its omited, the first element of the array you call reduce on is considered the initialValue. The accumulator is whats supposed to be returned by the method in the end. The initialValue represents the initial value of the accumulator. You surely have encountered examples when the initial value was set to an empty array [], or occasionally it would be an empty object {}, depending what you want to return of the reduce.
The currentValue is the current element the function is processing(as you should know, reduce iterates thru each element in an array).
In the current example, the reduce starts with an object, holding a key total set to value 0. In goes on to iterate on each element from the cid array. Every element in that array is also an array with two values, the currency and the amount. curr is the current element from the cid array we work with. curr[0] is the currency string, curr[1] is the amount. Like i said acc will start as the object { total: 0 }.
acc.total += curr[1] will add the current element amount to the total value of the account object.
acc[curr[0]] = curr[1] creates another key in the account object, which is called after the element currency and assigns the element amount as its value.
In the end the returned object will own keys corresponding to each currency it has added and their corresponding values, plus the total value.
I hope i put it clear enough^^

May I suggest that you make the below changes to your code and see what the console prints?

var register = cid.reduce(
    function(acc, curr, idx) { // Include the index argument.
      console.log(`acc before iteration ${idx}:\n`,  acc); // Add this line.
      acc.total += curr[1];
      acc[curr[0]] = curr[1];
      console.log(`acc after iteration ${idx}:\n`,  acc, "\n============"); // Add this line.
      return acc;
    },
    { total: 0 }
  );

Fantastic explanation, many thanks.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.