learn.colinkim.dev

Array methods: find, some, every, and sort

Learn the array methods for searching, testing, and ordering data — when to use each one and the gotchas to avoid.

map, filter, and reduce cover the broadest transformations. But you often need to find a single item, test whether any or all elements match a condition, or reorder an array. These methods handle those cases.

find returns the first matching element

find searches through an array and returns the first element for which the callback returns a truthy value:

const users = [
  { id: 1, name: "Ada", active: true },
  { id: 2, name: "Grace", active: false },
  { id: 3, name: "Alan", active: true },
];

const user = users.find((u) => u.id === 2);
// { id: 2, name: "Grace", active: false }

If no element matches, find returns undefined:

const missing = users.find((u) => u.id === 99);
// undefined

find stops searching as soon as it finds a match — it does not scan the entire array unnecessarily.

findIndex returns the position instead

const index = users.findIndex((u) => u.id === 2);
// 1

If you need to remove or replace an element, findIndex gives you its position.

some tests whether at least one element matches

some returns true if the callback returns a truthy value for any element:

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

numbers.some((n) => n > 4);   // true
numbers.some((n) => n > 10);  // false

Like find, some short-circuits — it stops as soon as it finds a match.

every tests whether all elements match

every returns true only if the callback returns a truthy value for every element:

const numbers = [2, 4, 6, 8];

numbers.every((n) => n % 2 === 0);  // true — all even
numbers.every((n) => n > 3);        // false — 2 is not > 3

every also short-circuits — it stops at the first failure.

An empty array returns true for every. This is called a “vacuous truth” — there are no elements that fail the test, so the test passes:

[].every(() => false);  // true

sort reorders elements

sort rearranges the array in place and returns a reference to the same array:

const names = ["Charlie", "Alice", "Bob"];
names.sort();
// ["Alice", "Bob", "Charlie"]

The default sort converts to strings

Without a comparison function, sort converts elements to strings and compares them. This works for strings but produces wrong results for numbers:

const numbers = [10, 2, 1, 20];
numbers.sort();
// [1, 10, 2, 20] — sorted as strings, not numbers

Provide a comparison function for numbers

The comparison function receives two elements and should return:

  • a negative number if the first should come before the second
  • a positive number if the first should come after the second
  • 0 if their order does not matter
const numbers = [10, 2, 1, 20];
numbers.sort((a, b) => a - b);
// [1, 2, 10, 20] — correct numeric sort

numbers.sort((a, b) => b - a);
// [20, 10, 2, 1] — descending

Sorting objects by property

const products = [
  { name: "Laptop", price: 999 },
  { name: "Phone", price: 699 },
  { name: "Book", price: 15 },
];

products.sort((a, b) => a.price - b.price);
// [{ name: "Book", price: 15 }, { name: "Phone", price: 699 }, { name: "Laptop", price: 999 }]

toSorted is a non-mutating alternative (ES2023)

const numbers = [3, 1, 2];
const sorted = numbers.toSorted((a, b) => a - b);
// sorted: [1, 2, 3]
// numbers: [3, 1, 2] — unchanged

toSorted is available in modern environments. Check your target platforms before relying on it.

toReversed is a non-mutating alternative to reverse (ES2023)

const numbers = [1, 2, 3];
const reversed = numbers.toReversed();
// reversed: [3, 2, 1]
// numbers: [1, 2, 3] — unchanged

toSpliced is a non-mutating alternative to splice (ES2023)

const fruits = ["apple", "banana", "cherry", "date"];

// Remove 1 item at index 1
const withoutBanana = fruits.toSpliced(1, 1);
// ["apple", "cherry", "date"]
// fruits: unchanged

// Replace 1 item at index 1
const swapped = fruits.toSpliced(1, 1, "blueberry");
// ["apple", "blueberry", "cherry", "date"]
// fruits: unchanged

with replaces an element immutably (ES2023)

const colors = ["red", "green", "blue"];

const updated = colors.with(1, "yellow");
// ["red", "yellow", "blue"]
// colors: ["red", "green", "blue"] — unchanged

This is equivalent to [...colors]; updated[1] = "yellow" but in a single expression. It throws if the index is out of range, making it safer than direct assignment.

When to use each method

| Question | Method | |---|---| | Is at least one element matching? | some | | Are all elements matching? | every | | What is the first matching element? | find | | What is the index of the first match? | findIndex | | How do I reorder this array? | sort (mutates) or toSorted (copies) |

What to carry forward

  • find returns the first match or undefined
  • some returns true if any element matches — short-circuits
  • every returns true if all elements match — short-circuits on first failure
  • sort mutates the original array and sorts as strings by default
  • always provide a comparison function to sort for numbers
  • use [...array].sort(...) to sort without mutating the original
  • toSorted, toReversed, toSpliced, and with are non-mutating alternatives introduced in ES2023
  • prefer the to* methods when your environment supports them for cleaner immutable code

These methods complete the array toolkit. Combined with map, filter, and reduce, they cover essentially every array operation you will encounter.

Quick Check

One answer

You only need to know whether any item in the array matches a condition. Which method communicates that intent best?

Choose the best answer and use it to track your progress through the lesson.

Progress

Quick checks

No quick checks in this lesson.

Mark lesson manually or answer quick checks to track progress.