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

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