📊 Map, Filter, Reduce = Array Power
Loops are imperative. Map, Filter, Reduce are functional. Transform, filter, accumulate — elegant array manipulation.
📝 Map (Transform)
// Map - Transform each element
const numbers = [1, 2, 3, 4, 5];
// Double each number
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// Convert to strings
const strings = numbers.map(n => `Number: ${n}`);
console.log(strings); // ["Number: 1", "Number: 2", ...]
// Extract property
const users = [{ name: 'Alice', age: 30 }, { name: 'Bob', age: 25 }];
const names = users.map(u => u.name);
console.log(names); // ['Alice', 'Bob']
// Add property
const withId = users.map((u, i) => ({ ...u, id: i + 1 }));
// Conditional mapping
const results = numbers.map(n => n > 3 ? 'high' : 'low');
🎯 Filter (Select)
// Filter - Select elements
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// Even numbers
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]
// Greater than 5
const big = numbers.filter(n => n > 5);
console.log(big); // [6, 7, 8, 9, 10]
// Filter objects
const users = [
{ name: 'Alice', age: 30, active: true },
{ name: 'Bob', age: 25, active: false },
{ name: 'Charlie', age: 35, active: true }
];
const activeUsers = users.filter(u => u.active);
console.log(activeUsers); // [{ name: 'Alice', ... }, { name: 'Charlie', ... }]
// Search filter
const searchTerm = 'ali';
const found = users.filter(u =>
u.name.toLowerCase().includes(searchTerm.toLowerCase())
);
// Remove duplicates
const unique = numbers.filter((v, i, arr) => arr.indexOf(v) === i);
🎯 Reduce (Accumulate)
// Reduce - Accumulate
const numbers = [1, 2, 3, 4, 5];
// Sum
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
// Product
const product = numbers.reduce((acc, curr) => acc * curr, 1);
console.log(product); // 120
// Max value
const max = numbers.reduce((acc, curr) => Math.max(acc, curr));
console.log(max); // 5
// Count occurrences
const fruits = ['apple', 'orange', 'apple', 'banana', 'orange', 'apple'];
const count = fruits.reduce((acc, curr) => {
acc[curr] = (acc[curr] || 0) + 1;
return acc;
}, {});
console.log(count); // { apple: 3, orange: 2, banana: 1 }
// Group by property
const users = [
{ name: 'Alice', role: 'admin' },
{ name: 'Bob', role: 'user' },
{ name: 'Charlie', role: 'admin' }
];
const grouped = users.reduce((acc, user) => {
(acc[user.role] = acc[user.role] || []).push(user);
return acc;
}, {});
console.log(grouped);
// Chaining map + filter + reduce
const result = users
.filter(u => u.active)
.map(u => u.age)
.reduce((sum, age) => sum + age, 0);
console.log(result); // Sum of active users' ages
💡 Performance Tips
- Chain operations for readability
- Use filter before map (reduce items)
- Use reduce for complex accumulations
- Functions are immutable (create new arrays)
- Use forEach for side effects
“Map, Filter, Reduce = array power. Transform, select, accumulate. Essential for functional JavaScript.”
