Overview
When you need to calculate a total value from array data or join multiple strings into a single sentence, using a for or forEach loop often requires defining temporary variables, which can make your code long. By using the reduce method, you can “fold” each element of an array into a single value in a smart way. This article explains how to use these methods using examples from a logistics system, such as inventory counting and route tracking.
Specifications (Input/Output)
reduce / reduceRight Methods
These methods use a callback function to consolidate array elements into a single value, such as a number, string, or object.
| Method | Processing Direction | Handling of Initial Value |
| reduce | Left to Right (Index 0 → End) | If not specified, the first element becomes the initial value. |
| reduceRight | Right to Left (End → Index 0) | If not specified, the last element becomes the initial value. |
Syntax:
array.reduce((accumulator, currentValue, index, array) => { ... }, initialValue)
- accumulator: The value returned by the previous callback.
- currentValue: The element currently being processed.
- initialValue: The value used for the first accumulator (recommended to specify).
- Input: An array of data.
- Output: A single calculated value.
Basic Usage
1. Calculating Total Value (reduce)
You can find a sum without using a for loop. It is important to set the initial value to 0.
const sales = [1500, 2300, 800];
// prev: accumulated total, current: current element
const total = sales.reduce((prev, current) => {
return prev + current;
}, 0);
console.log(total); // 4600
2. Flattening an Array (reduce + concat)
This logic combines a 2D array into a 1D array. While flat() exists in modern JavaScript, this is helpful for understanding logic.
const clusters = [['Area-A', 'Area-B'], ['Area-C']];
const flatArea = clusters.reduce((prev, current) => {
return prev.concat(current);
}, []); // Initial value is an empty array
console.log(flatArea); // ["Area-A", "Area-B", "Area-C"]
3. Joining Strings in Reverse (reduceRight)
This method processes the array from the end to the beginning.
const route = ['Start', 'Point-A', 'Goal'];
// Join from Right (Goal) to Left (Start)
const reverseRoute = route.reduceRight((prev, current) => {
return `${prev} <- ${current}`;
});
console.log(reverseRoute); // "Goal <- Point-A <- Start"
Full Code (HTML / JavaScript)
This is a demo of a logistics dashboard. It calculates the total inventory (reduce) across warehouses and displays a traceability route (reduceRight).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logistics Dashboard</title>
<style>
.dashboard {
font-family: 'Segoe UI', sans-serif;
max-width: 500px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f4f6f9;
}
h3 { margin-top: 0; color: #2c3e50; }
.section {
background: white;
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.data-label { font-size: 0.9em; color: #7f8c8d; margin-bottom: 5px; }
.data-value { font-size: 1.2em; font-weight: bold; color: #2980b9; }
.route-step {
display: inline-block;
padding: 4px 8px;
background: #ecf0f1;
border-radius: 4px;
margin: 2px;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="dashboard">
<h3>Logistics Dashboard</h3>
<div class="section">
<div class="data-label">Total Inventory (All Warehouses)</div>
<div id="total-inventory" class="data-value">Calculating...</div>
</div>
<div class="section">
<div class="data-label">Shipping Traceability (Current ← Origin)</div>
<div id="trace-route" class="data-value" style="font-size: 1em;">Calculating...</div>
</div>
</div>
<script src="logistics.js"></script>
</body>
</html>
JavaScript
/**
* Logistics Management Script
* Aggregation with reduce and reverse joining with reduceRight
*/
// 1. Inventory data for each warehouse
const warehouseStocks = [120, 85, 40, 250, 90];
// 2. Shipping route data
// Recorded as [Origin, Hub 1, Hub 2, ..., Current Location]
const shippingRoute = [
'Chiba Central Warehouse',
'Tokyo Bay Hub',
'Saitama Distribution Center',
'Ageo Branch'
];
const totalEl = document.getElementById('total-inventory');
const traceEl = document.getElementById('trace-route');
/**
* Calculate total stock using reduce
*/
const calcTotalStock = () => {
// Start with 0 and add current stock value
const total = warehouseStocks.reduce((accumulator, stock) => {
return accumulator + stock;
}, 0);
totalEl.textContent = `${total.toLocaleString()} units`;
};
/**
* Display shipping route in reverse using reduceRight
* Generates a string tracing back from Current Location to Origin
*/
const renderTraceRoute = () => {
// Process from end (current location) to start (origin)
// No initial value; the last element becomes the first accumulator
const routeString = shippingRoute.reduceRight((prev, current) => {
return `${prev} ← ${current}`;
});
traceEl.textContent = routeString;
};
// Execution
calcTotalStock();
renderTraceRoute();
Custom Points
- Importance of Initial Value: When doing math, always set an initial value (like 0) to prevent errors if the array is empty.
const sum = [].reduce((a, b) => a + b, 0);returns 0 safely. - Aggregating Object Arrays: For data like
[{ price: 100 }, { price: 200 }], set the initial value to 0 and useacc + cur.priceto sum specific properties.
Important Notes
- Behavior with Empty Arrays: If you run
reduceon an empty array without an initial value, aTypeErrorwill occur. Always provide an initial value if the data might be empty. - Readability: While
reduceis powerful, complex logic with nested loops can make code hard to read. If the logic becomes too complicated, using a standardfor...ofloop may be better for clarity.
Advanced Usage
Creating an Object from an Array (Grouping)
You can convert array data into an object categorized by specific keys.
const items = ['Pen', 'Note', 'Pen', 'Box'];
// Count occurrences of each item
const count = items.reduce((acc, item) => {
// Initialize if key doesn't exist
if (!acc[item]) acc[item] = 0;
// Increment count
acc[item]++;
return acc;
}, {}); // Initial value is an empty object
console.log(count); // { Pen: 2, Note: 1, Box: 1 }
Summary
The reduce method is a versatile tool for array manipulation. Use reduce when you want to summarize an array into a single value or a new structure from left to right. Use reduceRight when the order matters and you need to process data starting from the end. These methods go beyond simple math, offering a powerful way to transform and group data with clean, professional logic.
