JavaScript Array Methods: The Complete Guide

JavaScript arrays ship with a rich set of built-in methods. The functional methods — map, filter, reduce, and friends — let you transform data declaratively without writing loops. Here is a thorough walkthrough with real examples you can use immediately.

Transformation Methods

map()

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

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

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

filter()

Returns a new array containing only elements for which the callback returns true.

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

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

reduce()

Reduces an array to a single value by accumulating results. It is the most powerful and most misunderstood array method.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
// 10

// 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] ??= []).push(item.name);
  return acc;
}, {});
// { fruit: ["Apple", "Banana"], vegetable: ["Carrot"] }

flatMap()

Maps each element, then flattens the result by one level. Useful when each element produces an array of results.

const sentences = ["hello world", "foo bar"];
const words = sentences.flatMap(s => s.split(" "));
// ["hello", "world", "foo", "bar"]

Search and Test Methods

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 idx = users.findIndex(u => u.id === 2);
// 1

// Returns undefined / -1 if not found

some() and every()

some() returns true if at least one element passes the test. every() returns true only if all elements pass.

const scores = [45, 72, 88, 91];

scores.some(s => s >= 90);   // true  (91 qualifies)
scores.every(s => s >= 40);  // true  (all pass)
scores.every(s => s >= 70);  // false (45 fails)

includes()

["a", "b", "c"].includes("b");     // true
[1, 2, NaN].includes(NaN);         // true  (unlike indexOf)

Sorting and Reversing

sort()

Sorts in place and returns the same array. Without a comparator it converts elements to strings — which breaks numeric sorting.

// WRONG for numbers
[10, 9, 2, 100].sort()           // [10, 100, 2, 9]  ← string sort!

// Correct numeric sort
[10, 9, 2, 100].sort((a, b) => a - b)   // [2, 9, 10, 100]
[10, 9, 2, 100].sort((a, b) => b - a)   // [100, 10, 9, 2]

// Sort objects
users.sort((a, b) => a.name.localeCompare(b.name));

reverse()

Reverses in place. Use [...arr].reverse() to avoid mutating the original.

Adding and Removing Elements

const arr = [1, 2, 3];

arr.push(4);           // add to end      → [1, 2, 3, 4]
arr.pop();             // remove from end → [1, 2, 3]
arr.unshift(0);        // add to start    → [0, 1, 2, 3]
arr.shift();           // remove from start → [1, 2, 3]

// splice: remove/insert at any index
arr.splice(1, 1);            // remove 1 element at index 1
arr.splice(1, 0, 99, 100);   // insert 99 and 100 at index 1

// Non-mutating alternatives (ES2023+)
arr.toSpliced(1, 1);
arr.toReversed();
arr.toSorted((a, b) => a - b);
arr.with(1, 99);             // return new array with index 1 set to 99

Flattening

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

Combining Arrays

const a = [1, 2];
const b = [3, 4];

a.concat(b);          // [1, 2, 3, 4]
[...a, ...b];         // same with spread (preferred)

// slice: extract a portion without mutation
[1, 2, 3, 4, 5].slice(1, 3);   // [2, 3]
[1, 2, 3, 4, 5].slice(-2);     // [4, 5]

Iteration

const items = ["a", "b", "c"];

items.forEach((item, index) => {
  console.log(index, item);
});
// forEach has no return value — use map if you need results

// entries(), keys(), values()
for (const [i, val] of items.entries()) {
  console.log(i, val);
}

Array.from() and Array.of()

// Convert iterables to arrays
Array.from("hello");           // ["h", "e", "l", "l", "o"]
Array.from({ length: 5 }, (_, i) => i * 2);  // [0, 2, 4, 6, 8]
Array.from(new Set([1, 2, 2, 3]));  // [1, 2, 3]

// Array.of creates an array from arguments
Array.of(7);    // [7]  (unlike Array(7) which creates empty slots)

Quick Reference

The golden rule: prefer non-mutating methods (map, filter, slice) to avoid surprising bugs in React state and functional code. Use the JSON Tools on io9.me to inspect and format any JSON arrays you are working with.