Array Methods — map, filter, find & reduce
These four methods replace most for loops in real apps. React renders lists with map. APIs return arrays you filter and reduce for totals. Master these before React — you will use them every day.
map — transform each item
const prices = [499, 999, 0];
const withGst = prices.map(p => Math.round(p * 1.18));
// [589, 1179, 0]
const courses = [{ title: 'ES6' }, { title: 'React' }];
const titles = courses.map(c => c.title);
// ['ES6', 'React']filter — keep matching items
const ebooks = [
{ title: 'Node', price: 499, free: false },
{ title: 'Intro JS', price: 0, free: true }
];
const freeBooks = ebooks.filter(b => b.free || b.price === 0);find — first match
const user = users.find(u => u.email === 'alex@toolliyo.com');reduce — single result
const orders = [{ total: 500 }, { total: 1200 }, { total: 300 }];
const revenue = orders.reduce((sum, o) => sum + o.total, 0);
// 2000🌍 Real-world example — Dashboard: top free courses
const catalog = [
{ title: 'ES6 Basics', enrollments: 1200, free: true },
{ title: 'React Pro', enrollments: 800, free: false },
{ title: 'Node Chat', enrollments: 950, free: true }
];
const freeEnrollmentTotal = catalog
.filter(c => c.free)
.map(c => c.enrollments)
.reduce((a, b) => a + b, 0);
console.log(freeEnrollmentTotal); // 2150💡 Tip: Chain methods: filter → map → reduce. Read left to right as a pipeline.
⚠️ Common Mistake: Using map when you mean forEach — map builds a new array; if you ignore the return value, use forEach instead.
👨🏫 Teaching note: Live exercise: given 10 product objects, return names of items under ₹500 sorted by price — filter + map + sort.