# Calculating Total Spending with 'reduce'

This tutorial breaks down the usage of the code snippet step by step, using your provided data, to help you understand how the `reduce` function calculates the total spending across multiple accounts.

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.