Array.prototype.toReversed()
toReversed() The toReversed() method returns a new array with the elements in reversed order. Unlike the older reverse() method, which mutates the original array, toReversed() leaves your original data intact. This is the key distinction: reverse() changes the array you call it on; toReversed() always produces a new array.
This method is part of the ES2023 “change array by copy” proposal, alongside toSorted(), toSpliced(), and with(). Together they provide immutable alternatives to the array methods that previously had no non-mutating version.
Syntax
arr.toReversed()
Parameters
None.
Return value
A new array with the elements in reversed order. The original array is not changed. This is the guarantee that separates toReversed() from reverse() — no mutation means you can safely pass the original array elsewhere without worrying about unexpected side effects.
Examples
Basic usage
const arr = [1, 2, 3];
const reversed = arr.toReversed();
console.log(arr); // unchanged: [1, 2, 3]
console.log(reversed); // [3, 2, 1]
This basic example shows the key difference from reverse(): the original arr stays intact. That guarantee matters in any code where you share array references across components or functions, because it eliminates the risk of distant code seeing a reversed array when it expects the original order.
Working with strings
const chars = ["a", "b", "c"];
const reversed = chars.toReversed();
console.log(reversed); // ["c", "b", "a"]
The same immutable pattern works regardless of element type. Strings, numbers, and objects all reverse in the same way—the new array holds the elements in reverse order, but the values themselves remain shared references between both arrays. The original is safe from reordering, though object mutations would still be visible in both.
Preserving original with objects
const items = [
{ id: 1, text: "First" },
{ id: 2, text: "Second" },
{ id: 3, text: "Third" }
];
const reversedItems = items.toReversed();
console.log(items.length); // 3 (unchanged)
console.log(reversedItems[0].text); // "Third"
Chaining toReversed() with other immutable methods like toSorted() creates multi-step transformations without side effects. Each step produces a fresh array, so you can build complex pipelines while keeping the original data clean for later comparison or rollback.
Note that the new array contains references to the same objects, not deep copies. Mutating the objects themselves would affect both arrays.
Sorting then reversing
const scores = [95, 42, 87, 73, 60];
const sorted = scores.toSorted((a, b) => a - b);
const reversed = sorted.toReversed();
console.log(sorted); // [42, 60, 73, 87, 95]
console.log(reversed); // [95, 87, 73, 60, 42]
Chaining toSorted and toReversed gives you a descending sort without touching the original array. This is a common pattern for displaying leaderboards or “newest first” lists, where the source data stays sorted chronologically but the view reverses it for display.
Practical: displaying newest first
const posts = [
{ title: "Post 1", date: "2024-01-01" },
{ title: "Post 2", date: "2024-02-01" },
{ title: "Post 3", date: "2024-03-01" }
];
// Show newest posts at the top
const newestFirst = posts.toSorted((a, b) =>
new Date(b.date) - new Date(a.date)
);
console.log(newestFirst.map(p => p.title));
// ["Post 3", "Post 2", "Post 1"]
Having seen several patterns, the decision between toReversed() and reverse() comes down to one question: do you need the original array afterward? If the answer is yes—and in most modern code it is—reach for the immutable version.
When to use toReversed() vs reverse()
Choose toReversed() when:
- You need to preserve the original array
- Working with React state or any immutable patterns
- Chaining multiple array transformations
- You want predictable, side-effect-free code
Use reverse() only when you deliberately want in-place mutation — for example, reversing a buffer that you own and will discard afterward.
Browser support
toReversed() was added in ES2023 and has full support in modern browsers and Node.js 20+. For older environments, polyfill with [...arr].reverse().
How toReversed() works
Internally, toReversed() creates a new array of the same length, then copies elements from the original array in reverse index order. The operation is O(n) in both time and space. Because it always allocates a new array, repeated calls in a tight loop may create GC pressure; in those situations, pre-allocate a buffer and use reverse() on a copy.
Shallow copy behaviour
Like slice(), toReversed() produces a shallow copy. Primitive values (numbers, strings, booleans) are copied by value. Objects and arrays are copied by reference — the reversed array and the original array share the same object references.
const matrix = [[1, 2], [3, 4], [5, 6]];
const rev = matrix.toReversed();
rev[0][0] = 99;
console.log(matrix[2][0]); // 99 — shared reference
If you need a fully independent deep copy, use structuredClone() before or after reversing.
See Also
- Array.prototype.toSorted() — Return a sorted copy of an array
- Array.prototype.splice() — Add or remove elements from an array in place
- Array.prototype.with() — Return a copy with element at index replaced