JavaScript Array Methods: The Ones You'll Actually Use

JavaScript has dozens of built-in array methods, but a handful of them cover 90% of what you’ll do day to day. Master these and you’ll write cleaner, more expressive JavaScript — and you’ll read other people’s code much more easily.

map — Transform Every Element

map creates a new array by applying a function to each element:

const prices = [10, 20, 30, 40];
const withTax = prices.map(price => price * 1.15);
// [11.5, 23, 34.5, 46]

const users = [{ name: "Alice" }, { name: "Bob" }];
const names = users.map(user => user.name);
// ["Alice", "Bob"]

filter — Keep Elements That Pass a Test

const scores = [45, 82, 91, 37, 68];
const passing = scores.filter(score => score >= 60);
// [82, 91, 68]

const activeUsers = users.filter(user => user.active);

reduce — Combine Elements into a Single Value

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
// 15

// Group by category
const items = [
  { name: "Apple", category: "fruit" },
  { name: "Banana", category: "fruit" },
  { name: "Carrot", category: "vegetable" },
];

const grouped = items.reduce((acc, item) => {
  acc[item.category] = acc[item.category] || [];
  acc[item.category].push(item.name);
  return acc;
}, {});
// { fruit: ["Apple", "Banana"], vegetable: ["Carrot"] }

find and findIndex

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

const user = users.find(u => u.id === 2);        // { id: 2, name: "Bob" }
const index = users.findIndex(u => u.id === 2);  // 1

some and every

const ages = [18, 21, 15, 30];
const anyMinors = ages.some(age => age < 18);    // true
const allAdults = ages.every(age => age >= 18);  // false

Conclusion

These JavaScript array methods — map, filter, reduce, find, some, every — are the building blocks of clean data manipulation. They replace verbose for-loops with intent-revealing one-liners. Start replacing your next for-loop with the appropriate method and you’ll quickly see how much cleaner your code becomes.

Read next: Six ES6 Features Every JavaScript Developer Should Know

External resource: MDN — Array Methods