JavaScript arrays come with a powerful collection of higher-order functions—functions that take another function as an argument.
These tools let you write cleaner, more expressive, more functional code.

In this guide, we’ll explore all commonly used higher-order functions on arrays, grouped by purpose, with examples for each.

📦 What Are Higher-Order Functions?

A higher-order function is a function that:

• takes a function as an argument, and/or
• returns a function.

Array methods like map, filter, reduce, sort, some, etc., all fall in this category.

We’ll use an example dataset:

const products = [
  { name: "Laptop", price: 1200, inStock: true },
  { name: "Phone", price: 800, inStock: false },
  { name: "Tablet", price: 450, inStock: true },
  { name: "Monitor", price: 300, inStock: false },
];

🎨 TRANSFORMING ARRAYS

map()

Transforms each element and returns a new array. In below example code we are mapping our products array to produce an array of prices. An alternative way to interpret this is we map our array from one datatype to another. The amount of items in the orginating array will match the amount of items in the mapped array.

const prices = products.map((p) => p.price);
// [1200, 800, 450, 300]

flatMap()

Like map, but flattens the result by one level. You will incorporate this function when your intermediate function return an array. But the output should combine all of those arrays into a single array. Note that this will only be done for 1 level deep of an array, not nested.

const inventory = [
  { store: "A", items: ["laptop", "mouse"] },
  { store: "B", items: ["tablet"] },
];

const allItems = inventory.flatMap((s) => s.items);
// ["laptop", "mouse", "tablet"]

flat()

Flattens nested arrays. Given an input of nested arrays, produces an flat array using the elements of the nested arrays.

[1, [2, 3], [4]].flat();
// [1, 2, 3, 4]

🔍 FILTERING & FINDING

filter()

Filter functions require to return a boolean value. If the expression evaluates to true, the iterated item will be included. If not, the iterated item will be filtered out. Note: filter operation doesn’t mutate the input array, it produces a copy.

const inStock = products.filter((p) => p.inStock);

find()

Find returns the first item that matches from left-to-right, in other words if the expression evaluates to true, that item is returned. Returns undefined if nothing matches.

const firstCheap = products.find((p) => p.price < 500);

findLast()

Searches from right-to-left, returns the element itself like find(). Returns undefined if nothing matches.

const lastCheap = products.findLast((p) => p.price < 500);

findIndex()

Same logic as find() but the index is returned, not the element.

const idx = products.findIndex((p) => !p.inStock);

findLastIndex()

Same logic as findLast() but the index is returned, not the element.

const lastIdx = products.findLastIndex((p) => !p.inStock);

🔢 REDUCING VALUES

reduce()

Reduce produces a single value, often a calculation, from an array.

const total = products.reduce((sum, p) => sum + p.price, 0);

reduceRight()

Similar to reduce but from last index to 0-index.

const names = products.reduceRight((acc, p) => [...acc, p.name], []);

🧪 BOOLEAN CHECKS

some()

Returns true if at least one element matches the expression, false otherwise.

const hasCheap = products.some((p) => p.price < 400);

every()

Returns true if all elements match the expression, false otherwise.

const allInStock = products.every((p) => p.inStock);

🔁 ITERATION

forEach()

Iterates over each element of an array and runs the callback function. Doesn’t return a result.

products.forEach((p) => console.log(p.name));

🔀 ORDERING

sort()

Without any compare function, it sorts based on string value which can lead to surprises. For numeric sorting, use the code snippet below. Note, this does mutate the original array.

// Ascending
const sorted = [...products].sort((a, b) => a.price - b.price);
// Descending
const sorted = [...products].sort((a, b) => b.price - a.price);

toSorted()

Produces a sorted copy of the input array, otherwise same setup as sort().

const sortedCopy = products.toSorted((a, b) => a.price - b.price);

reverse() and toReversed()

Reverses the order of the array elements, reverse() mutates the input array, while toReversed() produces a reversed copy.

products.toReversed();

🎉 Summary

Thanks for reading!