reduce Array of Objects JavaScript

CODING Z2M

2 days ago2 min read

Calculating Category-Wise Totals from an Expense List in JavaScript

reduce Array of Objects JavaScript: If you're building a budgeting app, financial dashboard, or any application that handles expenses, calculating category-wise totals is a common requirement. Fortunately, with just a single line of JavaScript, you can efficiently process your data!

reduce Array of Objects JavaScript - Magic One-Liner Example:

const categoryTotals = categories.map((cat) =>

    expenses

      .filter((expense) => expense.category === cat && formatDate(expense.selectedDate) === selectedMonth)

      .reduce((sum, expense) => sum + expense.amount, 0)

);

This one-liner combines the power of .map(), .filter(), and .reduce() to calculate totals for each category. Let's break it down step by step!

Step 1: Extracting Each Category with .map()

The .map() method is used to loop through each category in the categories array. This creates a new array where each element corresponds to the total expenses for a specific category.

const categories = ["Food", "Transport", "Entertainment"];

Every category is processed separately, setting the stage for precise calculations.

Step 2: Filtering Relevant Expenses with .filter()

For each category, we need to filter out only the relevant expenses. The .filter() method selects expenses that match both the category and the selected month.

expenses.filter(  (expense) => expense.category === cat && formatDate(expense.selectedDate) === selectedMonth
);

This ensures only expenses with the correct category and date are included in the calculation.

Step 3: Summing Up Expenses with .reduce()

The .reduce() method then aggregates the amounts of the filtered expenses. It calculates the total by iterating through the array and accumulating the sum of the amount field.

[ { amount: 20 }, { amount: 15 } ].reduce((sum, expense) => sum + expense.amount, 0);

Output:

20 + 15 = 35

This step ensures each category receives its total expense amount for the selected month.

How the One-Liner Works:

const categoryTotals = categories.map((cat) =>
 expenses

      .filter((expense) => expense.category === cat && formatDate(expense.selectedDate) === selectedMonth)

      .reduce((sum, expense) => sum + expense.amount, 0)

);

.map() → Iterates through each category
.filter() → Selects only relevant expenses
.reduce() → Computes the total amount

The result is an array of total expenses per category—efficient and powerful!

Where Can This Be Used?

This technique is incredibly versatile and can be applied in various scenarios, including:

Budgeting apps: Display category-wise spending

Expense tracking dashboards: Visualize financial data

Monthly financial reports: Automate report generation

By leveraging this approach, you can optimize data processing and enhance the performance of your applications.

Final Takeaways:

.map() effectively loops through each category
.filter() narrows down expenses to the relevant subset
.reduce() efficiently calculates the total amount

When working with expense data, this method provides a clean and reliable way to generate meaningful insights quickly. Implement this in your next project to take your financial calculations to the next level!

codingz2m