Why Array Methods Matter
JavaScript array methods let you transform data declaratively. Instead of writing for loops, you describe what you want — not how to get it.
map
map transforms every element and returns a new array of the same length.
const prices = [10, 20, 30];
const withTax = prices.map((price) => price * 1.1);
// [11, 22, 33]
filter
filter returns a new array containing only elements that pass a test.
const users = [
{ name: 'Alice', active: true },
{ name: 'Bob', active: false },
];
const activeUsers = users.filter((user) => user.active);
// [{ name: 'Alice', active: true }]
reduce
reduce accumulates all elements into a single value.
const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, n) => acc + n, 0);
// 10
find and findIndex
find returns the first matching element. findIndex returns its index.
const items = [{ id: 1 }, { id: 2 }, { id: 3 }];
const item = items.find((i) => i.id === 2); // { id: 2 }
const idx = items.findIndex((i) => i.id === 2); // 1
Chaining
These methods compose cleanly.
const total = [10, 20, 30, null, 40]
.filter(Boolean)
.map((n) => n * 2)
.reduce((acc, n) => acc + n, 0);
// 200
flat and flatMap
flat flattens nested arrays. flatMap is map followed by one level of flat.
const nested = [[1, 2], [3, 4]];
nested.flat(); // [1, 2, 3, 4]
const sentences = ['hello world', 'foo bar'];
sentences.flatMap((s) => s.split(' '));
// ['hello', 'world', 'foo', 'bar']
Conclusion
Knowing these methods well makes most data transformation tasks a one-liner. When you reach for a for loop, ask whether map, filter, or reduce expresses the intent more clearly.