Techie BabajiLearn to Code. Build Real Skills.
ES6+ (Modern JavaScript) · ES2020 and Later

Modern Array Methods

Each new JavaScript edition adds small array helpers that replace clumsy code. These are the ones you will use every week.

Advanced 5 min Lesson 20 of 23 Runnable examples
Before you start:JavaScript: Array Methods
0/23 in ES6+
On this page · 5 min · Advanced

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Advanced
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Read from the end with at(-1)
  • Search with includes, find and findLast
  • Flatten nested arrays with flat and flatMap
  • Sort and update without mutating using toSorted, toReversed and with
  • Group items with Object.groupBy

Explanation#

at(-1) reads the last item (no more arr[arr.length - 1]). includes(x) returns true/false and handles NaN correctly.

find returns the first match; findLast and findLastIndex (ES2023) search from the end.

flat(depth) flattens nested arrays; flatMap maps and flattens one level in one step.

sort() and reverse() change the original array. ES2023 added copies: toSorted(), toReversed(), toSpliced() and with(index, value) — perfect for React state.

Array.from({ length: n }, (_, i) => …) builds arrays; Object.groupBy(items, fn) (ES2024) groups items into an object by key.

Code example: The modern toolkit#

JavaScriptThe modern toolkit Runnable
const scores = [42, 88, 67, 95, 73];


console.log(scores.at(-1));
console.log(scores.includes(88));
console.log(scores.find(s => s > 70), scores.findLast(s => s > 70));


const sorted = scores.toSorted((a, b) => b - a);
console.log(sorted, scores);
console.log(scores.with(0, 50));


console.log([[1, 2], [3, [4]]].flat(Infinity));
console.log(['hello world', 'good morning'].flatMap(s => s.split(' ')));
console.log(Array.from({ length: 5 }, (_, i) => i * 2));


const people = [
  { name: 'Asha', city: 'Pune' },
  { name: 'Ravi', city: 'Delhi' },
  { name: 'Meera', city: 'Pune' },
];
const byCity = Object.groupBy(people, p => p.city);
console.log(Object.keys(byCity), byCity.Pune.length);
Expected output
73
true
88 73
[ 95, 88, 73, 67, 42 ] [ 42, 88, 67, 95, 73 ]
[ 50, 88, 67, 95, 73 ]
[ 1, 2, 3, 4 ]
[ 'hello', 'world', 'good', 'morning' ]
[ 0, 2, 4, 6, 8 ]
[ 'Pune', 'Delhi' ] 2
Opens this example in the full playground

Step-by-step explanation#

  1. at(-1) gives the last score, 73.
  2. find gets the first score above 70 (88); findLast gets the last one (73).
  3. toSorted returns a new sorted array — scores is unchanged.
  4. with(0, 50) returns a copy with index 0 replaced.
  5. flat(Infinity) flattens all levels; flatMap splits each sentence and flattens the words.
  6. Array.from builds [0, 2, 4, 6, 8] from a length and a mapping function.
  7. Object.groupBy groups people by city: Pune has 2.

Real-world use case#

Sorting a product list for display with toSorted (without breaking the original order kept in state), and grouping orders by status for a dashboard with Object.groupBy.

Common mistakes#

sort() mutating shared data

items.sort() reorders the original — a classic React bug. Use toSorted() or [...items].sort().

Sorting numbers without a compare function

[10, 9, 1].sort() gives [1, 10, 9] because it compares strings. Pass (a, b) => a - b.

find vs filter confusion

find returns one item (or undefined); filter returns an array (maybe empty).

Best practices#

  • Prefer non-mutating methods for shared or state data
  • Always pass a compare function when sorting numbers
  • Use at(-1) for the last item
  • Check browser support for the newest methods (ES2023/2024) if you target old devices

Remember this#

to… methods (toSorted, toReversed) = “give me a changed copy”.

at(-1) = last. at(-2) = second last.

find = first one. filter = all of them.

Practice exercise#

Your task: Given orders = [{ id: 1, status: "paid", total: 500 }, { id: 2, status: "pending", total: 200 }, { id: 3, status: "paid", total: 300 }], group them by status and get the paid orders sorted by total (ascending) without mutating.

Need a hint?
Object.groupBy then toSorted.
Show solution
JavaScript Runnable
const orders = [
  { id: 1, status: 'paid', total: 500 },
  { id: 2, status: 'pending', total: 200 },
  { id: 3, status: 'paid', total: 300 },
];
const groups = Object.groupBy(orders, o => o.status);
console.log(groups.paid.toSorted((a, b) => a.total - b.total).map(o => o.id)); // [ 3, 1 ]
Opens this example in the full playground

Mini quiz#

Modern Array Methods quizPredict the output Question 1 of 3

What is printed?

console.log([5, 10, 15].at(-2));
Score so far: 0/0

Want more? Practise all ES6+ MCQs · ES6+ interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.