How to reverse an array in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Reversing the order of array elements is useful for displaying data in descending order, implementing undo functionality, or creating reverse chronological lists in JavaScript applications.
With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented array reversal in components like activity feeds, breadcrumb navigation, and timeline displays where the most recent items need to appear first.
From my extensive expertise, the most modern and safe solution is using the ES2023 toReversed() method, which returns a new array without mutating the original.
For in-place reversal, the classic reverse() method remains the fastest option.
Use toReversed() to create a reversed copy of an array without mutating the original, or reverse() to flip the array in place.
const numbers = [1, 2, 3, 4, 5]
const reversed = numbers.toReversed()
console.log(reversed)
// [5, 4, 3, 2, 1]
console.log(numbers)
// [1, 2, 3, 4, 5] — original unchanged
The toReversed() method was introduced in ES2023 and is the preferred approach in modern JavaScript. It returns a new array with the elements in reverse order while leaving the original array untouched. This makes it safe to use in React state updates and functional pipelines where immutability matters.
Using reverse() for in-place reversal
The classic reverse() method modifies the original array directly. This is more memory efficient because it does not create a copy, but it means the original order is lost.
const items = ['first', 'second', 'third']
items.reverse()
console.log(items)
// ['third', 'second', 'first']
Because reverse() mutates the array, you should only use it when you no longer need the original order or when you are working with a temporary variable that will not be referenced elsewhere.
Creating an immutable copy with spread
Before toReversed() was available, the common pattern was to spread the array into a new one and then call reverse() on the copy. You may still see this in older codebases.
const numbers = [1, 2, 3, 4, 5]
const reversed = [...numbers].reverse()
console.log(reversed)
// [5, 4, 3, 2, 1]
console.log(numbers)
// [1, 2, 3, 4, 5] — original unchanged
This achieves the same result as toReversed(), but toReversed() is cleaner and communicates intent more clearly. If you are writing new code, prefer toReversed() over the spread workaround.
Reversing an array of objects
Both methods work the same way with arrays of objects. This is common when displaying activity feeds or timelines where the most recent entry should appear first.
const activities = [
{ id: 1, action: 'Login', date: '2026-05-10' },
{ id: 2, action: 'Updated profile', date: '2026-05-11' },
{ id: 3, action: 'Uploaded file', date: '2026-05-12' }
]
const recentFirst = activities.toReversed()
console.log(recentFirst[0].action)
// 'Uploaded file'
The objects themselves are not cloned — toReversed() creates a shallow copy of the array with reversed order. If you need to sort by a specific property like date, consider using how to sort an array in JavaScript instead.
Reversing inside React state
When working with React, always use immutable operations to update state. The toReversed() method fits naturally because it returns a new array reference.
const [items, setItems] = useState(['A', 'B', 'C'])
const handleReverse = () => {
setItems(prev => prev.toReversed())
}
Calling reverse() directly on state would mutate the existing array without creating a new reference, so React would not detect the change and would skip the re-render.
Combining with toSorted() for descending order
If you need a descending sort rather than a simple reversal, combine toSorted() with a comparator instead of sorting and then reversing.
const scores = [42, 7, 99, 23, 65]
const descending = scores.toSorted((a, b) => b - a)
console.log(descending)
// [99, 65, 42, 23, 7]
This is more explicit than scores.toSorted().toReversed() and avoids an unnecessary second pass over the array.
Best Practice Note:
This is the same approach we use in CoreUI components for creating reverse-ordered lists and implementing chronological data display. The Breadcrumb component, for example, benefits from predictable array order when building navigation paths.
In 2026, toReversed() is supported in all modern browsers and Node.js 20+. Prefer it over [...array].reverse() for cleaner, more intentional code. Only use the mutating reverse() when you explicitly need in-place modification and are certain the original array is not shared.
Related answers
- How to sort an array in JavaScript
- How to filter an array in JavaScript
- How to clone an array in JavaScript
