Real-World Example with map(), filter(), and reduce() Chained Together

Map, filter, and reduce provide fundamental functionality for working with arrays and objects in JavaScript. Understanding how to chain them together is key to writing clean and efficient code.

In this example, we’ll walk through a real-world scenario involving an array of product objects. Our goal is to calculate the total discounted price of all in-stock items.

First, we’ll use filter() to select only the products that are currently in stock.

Then, we’ll use map() to apply a 10% discount to their prices.

Finally, we’ll use reduce() to sum up the discounted prices into a single total.

Let’s dive into the code

const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Phone", price: 800, inStock: false },
  { name: "Tablet", price: 600, inStock: true },
  { name: "Monitor", price: 300, inStock: true }
];

const totalDiscountedPrice = products
  .filter(product => product.inStock)                // Step 1: Only in-stock items
  .map(product => product.price * 0.9)               // Step 2: Apply 10% discount
  .reduce((total, price) => total + price, 0);       // Step 3: Calculate total

console.log(`Total discounted price: $${totalDiscountedPrice.toFixed(2)}`);

Why use map after filter?

You only want to apply the discount to in-stock products. So, filtering first avoids unnecessary computation on out-of-stock items.

What if I need to keep product names along with prices?

ou can update the map step to return an object:

.map(product => ({
  name: product.name,
  discountedPrice: product.price * 0.9
}))

Is this approach performant for large data sets?

Yes, for moderately sized arrays it’s performant and expressive. For very large data, you might consider streaming libraries like lodash, or optimizing with generators/iterators.