Lesson 98 min read

Array Higher-Order Methods

Transform, filter, and crunch arrays like a data wizard — no loops needed

Why Higher-Order Methods?

Imagine you have a box of 100 LEGO bricks. You want to: pick out only the red ones, then make each one twice as tall, then count the total height. You could write three separate for loops... or you could use higher-order array methods that do all this in a clean, readable chain.

These methods take a callback function as an argument — a small function that describes what to do with each item. The method handles the looping for you. The Big Three you'll use constantly:

.map() — transform every item → get a new array of results
.filter() — keep only items that pass a test → get a shorter array
.reduce() — combine all items into a single value

Map, Filter & Reduce — The Big Three

let prices = [10, 25, 50, 75, 100];

// .map() — transform each item
let withTax = prices.map(price => price * 1.1);
console.log(withTax); // [11, 27.5, 55, 82.5, 110]

// .filter() — keep items that pass a test
let affordable = prices.filter(price => price <= 50);
console.log(affordable); // [10, 25, 50]

// .reduce() — combine into one value
let total = prices.reduce((sum, price) => sum + price, 0);
console.log(total); // 260

// 🔥 Chain them together!
let affordableTotal = prices
  .filter(price => price <= 50)     // [10, 25, 50]
  .map(price => price * 1.1)        // [11, 27.5, 55]
  .reduce((sum, p) => sum + p, 0);  // 93.5
console.log(affordableTotal); // 93.5

Output

[11, 27.5, 55, 82.5, 110]
[10, 25, 50]
260
93.5

Finding Things — find, findIndex, some, every

Sometimes you don't want to transform or filter an entire array — you just want to find something or ask a question about the array.

.find(fn) — returns the first item that passes the test (or undefined)
.findIndex(fn) — returns the index of the first match (or -1)
.some(fn) — returns true if at least one item passes
.every(fn) — returns true if all items pass
.includes(value) — checks if a specific value exists (no callback needed)

Find, Some & Every

let users = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 17 },
  { name: "Charlie", age: 35 },
  { name: "Diana", age: 15 }
];

// .find() — first match
let firstAdult = users.find(u => u.age >= 18);
console.log(firstAdult); // { name: "Alice", age: 28 }

// .findIndex() — index of first match
let idx = users.findIndex(u => u.name === "Charlie");
console.log(idx); // 2

// .some() — is at least one person under 18?
console.log(users.some(u => u.age < 18)); // true

// .every() — is everyone over 18?
console.log(users.every(u => u.age >= 18)); // false

// .includes() — simple value check (no callback)
let nums = [1, 2, 3, 4, 5];
console.log(nums.includes(3)); // true
console.log(nums.includes(9)); // false

Output

{ name: "Alice", age: 28 }
2
true
false
true
false

Sort & forEach

.sort() uses a sorting algorithm to sort an array in place (it changes the original!). By default, it converts everything to strings and sorts alphabetically — which means [10, 2, 1] sorts to [1, 10, 2]! To sort numbers correctly, you need a compare function.

.forEach() runs a function for each item but doesn't return anything. It's like for...of in method form. Use it when you want side effects (like logging) rather than a new array.

Sort & forEach

// .sort() — default is alphabetical (even for numbers!)
let nums = [30, 1, 100, 5, 20];
nums.sort();
console.log(nums); // [1, 100, 20, 30, 5] — WRONG for numbers!

// Sort numbers correctly with a compare function
nums.sort((a, b) => a - b); // ascending
console.log(nums); // [1, 5, 20, 30, 100]

nums.sort((a, b) => b - a); // descending
console.log(nums); // [100, 30, 20, 5, 1]

// Sort objects by a property
let students = [
  { name: "Zara", grade: 92 },
  { name: "Alex", grade: 88 },
  { name: "Mika", grade: 95 }
];
students.sort((a, b) => b.grade - a.grade);
console.log(students.map(s => `${s.name}: ${s.grade}`));

// .forEach() — do something for each item (no return value)
["apple", "banana", "cherry"].forEach((fruit, i) => {
  console.log(`${i + 1}. ${fruit}`);
});

Output

[1, 100, 20, 30, 5]
[1, 5, 20, 30, 100]
[100, 30, 20, 5, 1]
["Mika: 95", "Zara: 92", "Alex: 88"]
1. apple
2. banana
3. cherry

Note: Here's the cheat sheet: need a new array? Use .map(). Need fewer items? Use .filter(). Need a single result? Use .reduce(). Need to find one thing? Use .find(). Need a yes/no answer? Use .some() or .every(). Just need to do something? Use .forEach(). Don't use a for loop unless you need break or continue!

Quick check

What does [1, 2, 3].map(x => x * 2) return?

Dynamic ArraysData Structure

Resizing strategy, amortized O(1) push

→

Sliding WindowData Structure

Efficient subarray/substring processing

→

← Functions DOM Manipulation →