Calculating with 'reduce'

In this tutorial, you'll learn how to use the reduce function to calculate the total spending across multiple accounts, using a sample dataset. The goal is to understand the code snippet {{ item.accountDetails.reduce((accumulator, currentAccount) => { return accumulator + currentAccount.spend }, 0) }} and how it works with the provided data.

Step 1: Understand the Data

Let's start by examining the data structure. We have two types of accounts: "Checking" and "Savings," each containing a list of account details. Each account detail includes an accountNumber and the spend amount associated with that account.

[ 
 { 
  "acccountType": "Checking", 
  "currSym": "$", 
  "accountDetails": 
  [ 
   { 
    "accountNumber": 578614, 
    "spend": 9128.15, 
    "currency": "USD", 
    "currSym": "$" 
   }, 
   { 
    "accountNumber": 913835, 
    "spend": 5617.91, 
    "currency": "USD", 
    "currSym": "$" 
   }, 
   { 
    "accountNumber": 146373, 
    "spend": 1244.62, 
    "currency": "USD", 
    "currSym": "$" 
   }
  ] 
 },
 { 
  "acccountType": "Savings", 
  "currSym": "$", 
  "accountDetails": 
  [ 
   { 
    "accountNumber": 578614, 
    "spend": 128.15, 
    "currency": "USD", 
    "currSym": "$" 
   }, 
   { 
    "accountNumber": 13835, 
    "spend": 617.91, 
    "currency": "USD", 
    "currSym": "$" 
   }, 
   { 
    "accountNumber": 146373, 
    "spend": 244.62, 
    "currency": "USD", 
    "currSym": "$" 
   }
  ] 
 }
]

Step 2: Break Down the Code Snippet

The code snippet {{ item.accountDetails.reduce((accumulator, currentAccount) => { return accumulator + currentAccount.spend }, 0) }} calculates the total spending across all accounts using the reduce function. Let's break it down step by step:

1. item.accountDetails: This accesses the array of account details within the item object. In our case, we have two types of accounts, each with its own array of details.

2. .reduce((accumulator, currentAccount) => { return accumulator + currentAccount.spend }, 0): This part applies the reduce function to the accountDetails array. The reduce function iterates through each account detail and performs the following:

   • accumulator: This parameter keeps track of the running total. It starts with an initial value of 0 (0 at the end of the reduce function).

   • currentAccount: This parameter represents the current account detail being processed during each iteration.

   • currentAccount.spend: This accesses the spend amount of the current account detail.

   • accumulator + currentAccount.spend: This adds the current account's spend to the running total.

3. 0 (at the end): This is the initial value for the accumulator. It ensures that the calculation starts with a total of 0.

Step 3: Applying the Code Snippet to the Data

Let's apply the code snippet to the provided data to calculate the total spending for each account type:

• For the "Checking" accounts, the total spending is calculated by summing the spend amounts of all account details.

• For the "Savings" accounts, the same process is applied to calculate the total spending.

Step 4: Interpreting the Result

When you insert the code snippet into your application and provide the data, the result will be the total spending for each account type. The reduce function efficiently calculates the total by iteratively adding up the spend amounts of all account details.

Conclusion

By understanding and using the code snippet {{ item.accountDetails.reduce((accumulator, currentAccount) => { return accumulator + currentAccount.spend }, 0) }}, you can dynamically calculate the total spending across different types of accounts. The reduce function simplifies the process of summing up values in an array, making your code more concise and readable.