Essential Array Methods

Beyond map and filter, JavaScript arrays ship with a toolbox of built-in methods — find , some , every , flat , sort , and the immutable toSorted — that let you search, test, flatten, and reorder data without writing loops.

Learn Essential Array Methods in our free JavaScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Knowing which method fits a task is the difference between five lines of loop and one expressive line.

📚 Prerequisites: You should know arrays and callback functions / arrow functions . Most of these methods take a small callback that runs once per element.

🧰 Real-World Analogy: Array methods are like kitchen tools :

These four answer questions about an array. find returns the first matching element (or undefined ); findIndex returns its position (or -1 ). some returns true if at least one element passes; every returns true only if all do. includes checks for an exact value — handy for primitives.

find vs filter: reach for find when you want one result. filter always returns an array, so checking it requires .length .

flat() collapses nested arrays — pass a depth (or Infinity ) to go deeper. flatMap() maps then flattens one level in a single pass, perfect for expanding each item. at() reads by index and accepts negatives, so arr.at(-1) is the last element. fill() overwrites a range with one value.

at(-1) is the modern "last element": cleaner than arr[arr.length - 1] and it works on strings too.

sort() compares elements as strings by default, which mangles numbers. Pass a compare function: return a negative number to put a first, positive to put b first. (a, b) => a - b sorts ascending. The catch: sort() and reverse() mutate the original. The ES2023 toSorted() and toReversed() return a fresh array and leave the source untouched.

Prefer the immutable versions ( toSorted , toReversed , toSpliced , with ) when the data is shared — they prevent surprise mutations.

Use the right method to get the first number greater than 100.

Predict the output before revealing the answer.

[ 1, 22, 3 ] — default sort compares strings, so "22" comes before "3" .

true — at least one element (3) passes the test.

Sort players by score (highest first) without mutating the input, then report the top name.

Up next: Object Methods — keys, entries, assign, freeze and more. 🗝️

Practice quiz

What does arr.find(fn) return when no element passes the test?

  • null
  • -1
  • undefined
  • an empty array

Answer: undefined. find returns the first matching element, or undefined when nothing matches (findIndex returns -1).

What does [1, [2, [3, [4]]]].flat(2) produce?

flat(2) flattens two levels deep, leaving the [4] still nested one level down.

What is the value of [10, 20, 30].at(-1)?

  • 10
  • 20
  • 30
  • undefined

Answer: 30. at() accepts negative indices, so at(-1) reads the last element, 30.

What does [3, 22, 1].sort() log?

Default sort compares elements as strings, so '22' comes before '3'.

Which compare function sorts numbers in ascending order?

  • (a, b) => b - a
  • (a, b) => a - b
  • (a, b) => a > b
  • (a, b) => a

Answer: (a, b) => a - b. (a, b) => a - b returns negative when a should come first, giving ascending order.

How do toSorted() and toReversed() differ from sort() and reverse()?

  • They are faster
  • They mutate the original array
  • They return a new array without mutating the original
  • They only work on numbers

Answer: They return a new array without mutating the original. The ES2023 immutable versions return a fresh array and leave the source untouched.

What does [4, 9, 12].some(n => n % 2 === 0) return?

  • true
  • false

Answer: true. some returns true if at least one element passes; 4 and 12 are even.

What does ["a b", "c"].flatMap(s => s.split(" ")) produce?

flatMap maps each string to an array of words, then flattens one level into a single array.

Why does users.includes({ id: 1 }) return false even if such an object exists?

  • includes does not work on arrays of objects
  • includes compares by reference, and the literal is a different object
  • includes only checks the first element
  • You must pass a callback

Answer: includes compares by reference, and the literal is a different object. includes uses value equality; two different object references are never equal, so use some(u => u.id === 1).

What does [10, 2, 1].sort((a, b) => a - b) return?

With a numeric compare function it sorts ascending: [1, 2, 10].