Array Methods

JavaScript arrays ship with a rich set of higher-order methods that let you transform, search, and aggregate data declaratively. Knowing when to reach for each one — and which methods mutate the original array versus which return new ones — is essential everyday JavaScript.

Transforming: map, filter, reduce

These three are the backbone of functional array programming:

const prices = [10, 25, 5, 40, 15];

// map — transform each element, return new array of same length
const withTax = prices.map((p) => p * 1.1);
// [11, 27.5, 5.5, 44, 16.5]

// filter — keep elements that pass a test, return new (shorter) array
const affordable = prices.filter((p) => p < 20);
// [10, 5, 15]

// reduce — accumulate elements into a single value
const total = prices.reduce((acc, p) => acc + p, 0);
// 95

Chaining Pattern

Because map and filter return arrays, you can chain them directly:

interface Product {
  name: string;
  price: number;
  inStock: boolean;
}

const products: Product[] = [
  { name: "Widget", price: 9.99, inStock: true },
  { name: "Gadget", price: 49.99, inStock: false },
  { name: "Doohickey", price: 4.99, inStock: true },
];

const affordableNames = products
  .filter((p) => p.inStock)
  .filter((p) => p.price < 20)
  .map((p) => p.name.toUpperCase());
// ["WIDGET", "DOOHICKEY"]

For large arrays with many chain steps, consider a single reduce or a library like Lodash’s lazy chains to avoid creating many intermediate arrays.

Searching and Testing

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

// find — first element matching predicate, or undefined
nums.find((n) => n > 3);     // 4

// findIndex — index of first match, or -1
nums.findIndex((n) => n > 3); // 3

// some — true if at least one element passes
nums.some((n) => n > 4);     // true

// every — true only if ALL elements pass
nums.every((n) => n > 0);    // true
nums.every((n) => n > 2);    // false

// includes — true if value is present (uses SameValueZero)
nums.includes(3);             // true

forEach

forEach iterates for side effects. It always returns undefined — you cannot break out of it early and it cannot be chained.

const log: string[] = [];
nums.forEach((n) => log.push(`item ${n}`));
// Use for when you genuinely want side effects; prefer map/filter otherwise

sort Gotcha

Array.prototype.sort sorts in place (mutating!) and converts elements to strings by default:

[10, 2, 21, 1].sort(); // [1, 10, 2, 21] — lexicographic, not numeric!

// Correct numeric sort:
[10, 2, 21, 1].sort((a, b) => a - b); // [1, 2, 10, 21]

// Descending:
[10, 2, 21, 1].sort((a, b) => b - a); // [21, 10, 2, 1]

slice vs splice

const arr = [1, 2, 3, 4, 5];

arr.slice(1, 3);   // [2, 3] — arr unchanged
arr.splice(1, 2);  // returns [2, 3] — arr is now [1, 4, 5]

flat and flatMap

const nested = [[1, 2], [3, [4, 5]]];

nested.flat();    // [1, 2, 3, [4, 5]] — one level deep
nested.flat(2);   // [1, 2, 3, 4, 5]  — two levels
nested.flat(Infinity); // fully flatten any depth

// flatMap = map then flat(1) — useful to avoid double iteration
const sentences = ["hello world", "foo bar"];
sentences.flatMap((s) => s.split(" "));
// ["hello", "world", "foo", "bar"]

Further Learning

Search these terms to go deeper:

• “MDN: Array” — the canonical reference for every array method with examples
• “JavaScript reduce explained” — many good articles; Mosh Hamedani’s and the “Reduce — A Guided Meditation” piece are popular
• “JavaScript array chaining performance” — when chaining creates too many intermediates and when to switch strategies
• “JavaScript sort stability” — modern engines guarantee stable sort (V8 since Node 11); older ones did not
• “You Don’t Know JS: Types & Grammar” — chapter on arrays covers coercion in array contexts

Array Methods

Arrays are lists, and JavaScript gives you handy tools to reshape those lists without writing loops. The three you’ll use most are map, filter, and reduce. Learn these and a huge amount of everyday code becomes short and readable.

The big three

const prices = [10, 25, 5, 40, 15]

// map — do something to EVERY item, get a new list of the same size
const withTax = prices.map(p => p * 1.1)
// [11, 27.5, 5.5, 44, 16.5]

// filter — KEEP only items that pass a test, get a shorter list
const cheap = prices.filter(p => p < 20)
// [10, 5, 15]

// reduce — SQUASH the list down to one value
const total = prices.reduce((sum, p) => sum + p, 0)
// 95

A memory aid: map transforms, filter selects, reduce combines.

Chaining them

Because map and filter return arrays, you can line them up:

const names = products
  .filter(p => p.inStock)      // only in-stock
  .filter(p => p.price < 20)   // only cheap
  .map(p => p.name)            // just the names

Reads almost like English, top to bottom.

Finding and testing

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

nums.find(n => n > 3)      // 4     — first match
nums.some(n => n > 4)      // true  — is ANY over 4?
nums.every(n => n > 0)     // true  — are ALL over 0?
nums.includes(3)           // true  — is 3 in there?

The sort surprise

sort does two sneaky things: it changes the original array, and it sorts as text by default:

[10, 2, 21, 1].sort()          // [1, 10, 2, 21] — wrong! sorted like words
[10, 2, 21, 1].sort((a, b) => a - b)  // [1, 2, 10, 21] — correct numbers

In one sentence

Use map to transform a list, filter to keep some items, and reduce to combine them into one value — all without touching the original array (unlike sort, which does change it).

Want to go deeper?

Switch to Expert mode above for reduce deep-dives, slice vs splice, flat/flatMap, and chaining performance.