toReversed() rounds out this section's coverage of Modern Arrays: the non-mutating counterpart to reverse(), completing the "to"-prefixed family alongside toSorted() for building fully immutable array-processing pipelines.
1toReversed() | JavaScript Tutorial - In-Depth Guide Part 1
toReversed() returns a new array with elements in reverse order, leaving the original array completely unchanged.
const original = [1, 2, 3];
const reversed = original.toReversed();
original; // [1, 2, 3] ā untouched
reversed; // [3, 2, 1]Reverse Without Mutating
2toReversed() | JavaScript Tutorial - In-Depth Guide Part 2
reverse() mutates the array in place, which is easy to forget since it also returns the array, making it look like a normal transformation in a chain.
const arr = [1, 2, 3];
arr.reverse(); // arr is now [3, 2, 1] ā mutated!Why reverse() Was Risky
3toReversed() | JavaScript Tutorial - In-Depth Guide Part 3
Before toReversed() existed, the standard non-mutating workaround was spreading first: '[...arr].reverse()'.
// Old idiom:
const reversedOld = [...arr].reverse();
// Modern equivalent:
const reversedNew = arr.toReversed();Replaces the Spread Idiom
4toReversed() | JavaScript Tutorial - In-Depth Guide Part 4
Reversing shows up often in real UI logic, like displaying a chat log or activity feed in most-recent-first order without disturbing the underlying chronological data.
const displayOrder = messages.toReversed(); // newest first, for display onlyCommon UI Use Case
5toReversed() | JavaScript Tutorial - In-Depth Guide Part 5
Together, toSorted() and toReversed() (plus toSpliced() and with()) let you build entirely mutation-free array-processing pipelines from end to end.
const view = items
.toSorted((a, b) => a.date - b.date)
.toReversed()
.filter((i) => i.visible);A Fully Immutable Pipeline
6Step-by-Step Breakdown
toReversed() returns a new array with elements in reverse order, leaving the original array completely unchanged.
reverse() mutates the array in place, which is easy to forget since it also returns the array, making it look like a normal transformation in a chain.
Checkpoint: Does calling .reverse() (not toReversed()) mutate the original array?
- āYes, reverse() mutates in place
- āNo, reverse() never mutates
Before toReversed() existed, the standard non-mutating workaround was spreading first: '[...arr].reverse()'.
Reversing shows up often in real UI logic, like displaying a chat log or activity feed in most-recent-first order without disturbing the underlying chronological data.
Together, toSorted() and toReversed() (plus toSpliced() and with()) let you build entirely mutation-free array-processing pipelines from end to end.
Checkpoint: Can toSorted() and toReversed() be chained together without ever mutating the original array?
- āYes, both return new arrays, so chaining is fully non-mutating
- āNo, at least one of them must mutate
Next, we'll explore 'The Map Collection'.
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Reversing for Display Should Not Affect Reading Order Announced to Screen Readers
When using toReversed() to show a feed newest-first, ensure the DOM order matches the visual order exactly, so screen reader users navigating sequentially experience the same newest-first order sighted users see, rather than a CSS-only visual reversal that leaves DOM order mismatched.
SEO Implications
- 1
No Direct SEO Effect
toReversed() is a display-ordering utility; SEO relevance is limited to ensuring consistent, correctly-ordered server-rendered content.
Best Practices
Prefer toReversed() Over [...arr].reverse() in Modern Codebases
It is more concise and immediately communicates non-mutating intent without requiring the reader to recognize the spread-copy convention.
Keep Canonical Data in Its Natural Order and Reverse Only for Display
Using toReversed() to build a display-only reversed view (rather than mutating the underlying data model) keeps the source of truth stable for any other code that depends on its original order.
Frequent Bugs
Chaining `.reverse()` in the middle of a data pipeline, not realizing it mutates the original array reference that other code still depends on afterward.
Replace with toReversed() whenever the original array's order must remain intact for other consumers.
Reversing a chronological data model directly (with reverse()) just to display it newest-first, causing any code that assumed chronological order elsewhere to break.
Keep the underlying data in canonical order and use toReversed() to produce a separate, reversed view specifically for display.
Real-World Examples
Displaying a Chat Log Newest-First
A messaging app stored messages in chronological order for correctness (pagination, syncing) but needed to display them newest-first in the chat UI.
const displayedMessages = messages.toReversed();
// `messages` stays chronological for pagination logic elsewhere