Array Methods Every Developer Should Know

Why Array Methods Matter

Modern JavaScript favors declarative array methods over manual for-loops. They make code more readable, less error-prone, and easier to chain together. These methods are the bread and butter of daily JavaScript work.

Transforming: map()

Creates a new array by applying a function to every element. The original array is not modified.

const prices = [10, 20, 30];
const withTax = prices.map(price => price * 1.1);
// [11, 22, 33]

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

Filtering: filter()

Returns a new array containing only elements that pass a test function.

const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(n => n % 2 === 0);
// [2, 4, 6]

const products = [
    {name: "Shirt", inStock: true},
    {name: "Pants", inStock: false},
    {name: "Hat", inStock: true},
];
const available = products.filter(p => p.inStock);
// [{name: "Shirt", ...}, {name: "Hat", ...}]

Reducing: reduce()

Reduces an array to a single value by applying a function against an accumulator:

const cart = [{price: 10}, {price: 20}, {price: 30}];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 60

// Grouping with reduce
const people = [
    {name: "Ada", dept: "Engineering"},
    {name: "Bob", dept: "Marketing"},
    {name: "Cat", dept: "Engineering"},
];
const byDept = people.reduce((groups, person) => {
    const dept = person.dept;
    groups[dept] = groups[dept] || [];
    groups[dept].push(person);
    return groups;
}, {});

Searching: find() and findIndex()

find() returns the first element that matches. findIndex() returns its index.

const users = [{id: 1, name: "Ada"}, {id: 2, name: "Bob"}];
const ada = users.find(u => u.id === 1);
// {id: 1, name: "Ada"}

const index = users.findIndex(u => u.name === "Bob");
// 1

Testing: some() and every()

const ages = [16, 21, 14, 30];
ages.some(age => age >= 21);  // true (at least one)
ages.every(age => age >= 18); // false (not all)

Flattening: flat() and flatMap()

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

const sentences = ["Hello world", "Goodbye world"];
const words = sentences.flatMap(s => s.split(" "));
// ["Hello", "world", "Goodbye", "world"]

Chaining Methods

The real power comes from chaining methods together. Each method returns a new array, which the next method operates on:

const result = orders
    .filter(o => o.status === "completed")
    .map(o => o.total)
    .reduce((sum, total) => sum + total, 0);

Summary

Master these methods and you will write cleaner, more expressive JavaScript. Start with map, filter, and reduce — they cover the vast majority of use cases.