map, filter, reduce0%
find, some, every

map, filter, reduce

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

map, filter, reduce in Modern JavaScript

Functional array processing is one of the most transformative paradigms in modern JavaScript. Rather than writing imperative for loops with mutating variables, map, filter, and reduce express data transformations declaratively, producing cleaner, bug-free, and highly testable code.

1. Array.prototype.map()

map() creates a new array populated with the results of calling a provided function on every element in the calling array. It never mutates the original array and always maintains a 1:1 length ratio.

Output
Input Array: [ 10, 20, 30 ]
Transformation: (x * 2)
Output Array: [ 20, 40, 60 ]
JavaScript
const products = [
{ id: 1, name: 'Mechanical Keyboard', price: 120 },
{ id: 2, name: 'Ergonomic Mouse', price: 85 },
{ id: 3, name: 'UltraWide Monitor', price: 450 }
];
 
// Extract just product names and discounted prices
const discountedProducts = products.map(product => ({
id: product.id,
name: product.name,
discountedPrice: product.price * 0.9
}));
 
console.log(discountedProducts);

2. Array.prototype.filter()

filter() creates a shallow copy of a portion of a given array, filtered down to just the elements that pass the test implemented by the provided callback function (evaluates to truthy).

Output
Input Array: [ 120, 85, 450 ]
Predicate: (price < 100)
Output Array: [ 85 ]
JavaScript
const transactions = [
{ id: 'tx_1', amount: 250, status: 'completed' },
{ id: 'tx_2', amount: 1200, status: 'pending' },
{ id: 'tx_3', amount: 75, status: 'completed' },
{ id: 'tx_4', amount: 540, status: 'failed' }
];
 
// Keep only completed transactions
const completedTx = transactions.filter(tx => tx.status === 'completed');
console.log(`Found ${completedTx.length} completed transactions.`);

3. Array.prototype.reduce()

reduce() executes a user-supplied "reducer" callback function on each element of the array, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements is a single value (number, string, object, or aggregated array).

Output
Syntax: array.reduce((accumulator, currentValue, currentIndex, array) => { ... }, initialValue)
Output
Accumulator: [ 0 ] + 250 -> [ 250 ] + 75 -> [ 325 ] (Final Total)

Computing Aggregates (Sum)

JavaScript
const totalCompletedRevenue = completedTx.reduce((acc, tx) => acc + tx.amount, 0);
console.log(`Total Revenue: $${totalCompletedRevenue}`);

Grouping Data with reduce()

JavaScript
const inventory = [
{ name: 'Apples', category: 'Fruit' },
{ name: 'Carrots', category: 'Vegetable' },
{ name: 'Bananas', category: 'Fruit' },
{ name: 'Broccoli', category: 'Vegetable' }
];
 
const groupedByCategory = inventory.reduce((acc, item) => {
const cat = item.category;
if (!acc[cat]) {
acc[cat] = [];
}
acc[cat].push(item.name);
return acc;
}, {});
 
console.log(groupedByCategory);
// {
// Fruit: ['Apples', 'Bananas'],
// Vegetable: ['Carrots', 'Broccoli']
// }

4. Method Chaining: The Declarative Pipeline

Because map and filter return new arrays, you can chain them into functional data pipelines:

JavaScript
const orders = [
{ customer: 'Alice', items: 3, total: 150, refunded: false },
{ customer: 'Bob', items: 1, total: 40, refunded: true },
{ customer: 'Charlie', items: 5, total: 320, refunded: false }
];
 
const averageValidOrderSize = orders
.filter(order => !order.refunded)
.map(order => order.total)
.reduce((sum, total, _, arr) => sum + (total / arr.length), 0);
 
console.log(`Average Order: $${averageValidOrderSize.toFixed(2)}`);
Interactive Quiz

Practice Quiz

Question 1
What will Array.prototype.map() return if the original array has 5 elements?
Question 2
What happens if you omit the initialValue parameter in Array.prototype.reduce()?
Question 3
Which method should you choose to remove invalid or falsy elements from an array?
Question 4
What does the code [1, 2, 3, 4].filter(x => x % 2 === 0).map(x => x * 10) return?
Question 5
Can reduce() return a complex object or array instead of a primitive number?
Next Lesson

find, some, every

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Form Events and Validationfind, some, every

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext