We are going to learn how to chain three of the most useful methods of arrays in one single problem statement, that is your map, filter, and reduce, and this will transform your data in a clean and a very concise way.
JavaScript Array Method Chaining: overview
Your problem statement is that imagine you have a list of product prices and you want to add the taxes. For adding taxes to every item we need a map method. We are going to use the map method in this step, then we need to filter the items which are over 50, and for that we are going to use the filter method, and then in the end we want to get the total sum of all the prices. For that purpose we use the reduce method because your reduce method returns a single value.
A small tip: each method returns a new array. Each method returns a new array except your reduce method which returns a single value. You need to plan your order very carefully.
JavaScript Array Method Chaining: setup
Let’s start with taking the example as prices equals to an array, and inside this we will give some random values like 10, 25, 40, 60, 100.
const prices = [10, 25, 40, 60, 100];
For performing the operation and all the methods, we will create another variable as total equals to the original array prices, then chain the methods.
Step-by-step JavaScript Array Method Chaining
First apply the map method. Inside this we’ll take price. Mapping takes each value each time, and we multiply price by 1.1 because we are adding the taxes of 10%.
Then apply the filter method. The price which is greater than 50 should pass through.
Then apply the reduce method with two different arguments that is sum and price, and return sum plus price, with the accumulator as 0.
const total = prices
.map((price) => price * 1.1)
.filter((price) => price > 50)
.reduce((sum, price) => sum + price, 0);
console.log(total); // 176
JavaScript Array Method Chaining: why 1.1 for tax
If you have a basic understanding of mathematics, then you can understand that if the tax is 10%, we will have price plus price into 0.1. This results in 1.1 into your price. That’s what we are doing here to add a 10% tax on every item.
JavaScript Array Method Chaining: filtering
We are using the filter method for separating out the prices which are above 50. After mapping the tax, only the values greater than 50 should be kept.
JavaScript Array Method Chaining: reducing to a single value
In the end we are using the reduce method to take out the sum. The 0 is the accumulator and acts as the storage part. Every time the current price is getting added to sum, and in the end we are getting a single value, and that is 176.
Final code and result
const prices = [10, 25, 40, 60, 100];
const total = prices
.map((price) => price * 1.1) // add 10% tax
.filter((price) => price > 50) // keep > 50 only
.reduce((sum, price) => sum + price, 0); // sum them
console.log(total); // 176
This is working and the problem is getting solved. We did the chaining of three different and the most important methods that is map, filter, and reduce, and we used this method to get the result in a very clean and a very concise way.
As discussed in
Count Element Frequencies Javascript Arrays, once you are comfortable with mapping and reducing, you can express common transformations compactly and clearly. If you are practicing control flow basics alongside array methods, you might also review
Master Do While Loops Javascript to contrast iterative loops with chained functional methods. Building small utilities like a clock often pairs well with array operations, and you can explore time handling in
Real Time Digital Clock Javascript.
Final thoughts
Plan your order carefully because each method except reduce returns a new array. Add your transformation with map, narrow the results with filter, and fold them into a single value with reduce. This pattern keeps your data transformation clear, readable, and concise.
