JavaScript Array Methods: Complete Guide — map, filter, reduce, find, forEach

#webdev #tools #javascript #programming

JavaScript array methods are the backbone of modern JavaScript development. map, filter, and reduce alone can replace 80% of the for loops you'll ever write.

The Big Three

map — Transform Every Item

const prices = [10, 25, 8, 50];

// Double every price
const doubled = prices.map(p => p * 2);
// [20, 50, 16, 100]

// Extract specific field from objects
const users = [{name: 'Alice', age: 30}, {name: 'Bob', age: 25}];
const names = users.map(u => u.name);
// ['Alice', 'Bob']

filter — Keep Only What Matches

const nums = [1, 2, 3, 4, 5, 6];

// Keep only even numbers
const evens = nums.filter(n => n % 2 === 0);
// [2, 4, 6]

// Filter objects
const users = [{name: 'Alice', active: true}, {name: 'Bob', active: false}];
const activeUsers = users.filter(u => u.active);
// [{name: 'Alice', active: true}]

reduce — Accumulate to One Value

const nums = [1, 2, 3, 4];

// Sum all numbers
const sum = nums.reduce((acc, n) => acc + n, 0);
// 10

// Build an object from array
const users = [{name: 'Alice', id: 1}, {name: 'Bob', id: 2}];
const userMap = users.reduce((acc, u) => ({...acc, [u.id]: u}), {});
// {1: {name: 'Alice', id: 1}, 2: {name: 'Bob', id: 2}}

Search Methods

const users = [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}];

users.find(u => u.id === 2);
// {id: 2, name: 'Bob'}

users.findIndex(u => u.id === 2);
// 1

[1, 2, 3, 2, 4].indexOf(2);      // 1 (first position)
[1, 2, 3, 2, 4].lastIndexOf(2); // 3 (last position)

Test Methods

const users = [{active: false}, {active: true}, {active: false}];

users.some(u => u.active);  // true (at least one)
users.every(u => u.active); // false (not all)

Modern Methods (ES2019+)

// flat — Flatten Arrays
const nested = [1, [2, 3], [4, [5, 6]]];
nested.flat(2);
// [1, 2, 3, 4, 5, 6]

// flatMap — Map + Flatten in One
const sentences = ['Hello world', 'How are you'];
sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'How', 'are', 'you']

The Bottom Line

Method	Use When
`map`	Transform every item
`filter`	Keep matching items
`reduce`	Accumulate to one value
`find`	Get first match
`some`	Check if any match
`every`	Check if all match
`flat`	Flatten nested arrays
`flatMap`	Map then flatten