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.
What You'll Learn in This Lesson
📚 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 :
- • find is tongs — grab the first item that matches
- • some / every are inspectors — "is any spoiled?" / "are all ripe?"
- • flat empties nested bags onto one tray
- • toSorted is a careful chef — arranges a fresh plate without disturbing the original
1️⃣ Searching & Testing: find, some, every, includes
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 .
2️⃣ Flattening & Indexing: flat, flatMap, at, fill
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.
3️⃣ Sorting: compare functions & immutable toSorted/toReversed
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.
🎯 Your Turn — Find the First Match
Use the right method to get the first number greater than 100.
🧠 Quick Recall
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.
Common Errors & Fixes
- 1️⃣ Sorting numbers without a compare function
- 2️⃣ Forgetting sort() mutates the original
- 3️⃣ Using includes with objects
- 4️⃣ Assuming find returns an array
🎯 Mini Challenge — Top Scorer Report
Sort players by score (highest first) without mutating the input, then report the top name.
Quick Reference
Method
Returns
find
first match or undefined
some / every
boolean
flat / flatMap
flattened array
at
element (negatives allowed)
toSorted / toReversed
new array (no mutation)
📚 Keep Learning
- MDN: Array reference
- MDN: Array.prototype.toSorted()
- MDN: Array.prototype.flatMap()
Frequently Asked Questions
🎉 Lesson Complete — Essential Array Methods!
- ✅ find / findIndex locate; some / every / includes test
- ✅ flat / flatMap collapse nested arrays
- ✅ at(-1) is the clean way to read from the end
- ✅ sort needs a compare function for numbers
- ✅ toSorted / toReversed return new arrays without mutating
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].
Continue this course
- Previous: Optional Chaining & Nullish Coalescing
- Next: Object Methods