JavaScript Array.toReversed() method (with examples)

This concise, straight-to-the-point article is about the Array.toReversed() method in modern JavaScript. We’ll learn the fundamentals of the method and then walk through some code examples of using it in practice.

Overview

The Array.toReversed() method is a relatively new feature of JavaScript that was added in ECMAScript 2023 (ES 13). Its purpose is to return a new array with the elements in reversed order, without mutating the original array.

At the time of writing, the Array.toReversed() method is supported by most modern web browsers, including Chrome, Edge, Safari, and Firefox.

Syntax

Syntax:

let newArray = array.toReversed();

The method takes no parameters and returns a new array that is the reversed copy of the original array.

Array.toReversed() vs Array.reverse()

JavaScript also provides another method for the job of reversing a given array, the Array.reverse() method, an old buddy. The main difference between the Array.toReversed() and Array.reverse() methods is that the former returns a new array with the elements in reversed order, while the latter reverses the array in place and returns the same array. This means that the Array.toReversed() method does not change the original array, but the Array.reverse() method does.

Examples

Reversing a simple array

This example shows you how to reverse a simple array of numbers using the Array.toReversed() method.

// Create an array of numbers
let numbers = [1, 2, 3, 4, 5];

// Reverse the array using toReversed()
let reversed = numbers.toReversed();

// Log the original and reversed arrays
console.log(numbers); // [1, 2, 3, 4, 5]
console.log(reversed); // [5, 4, 3, 2, 1]

As you can see, the original one is kept intact.

Reversing an array of strings

// Create an array of strings
let words = ["Welcome", "to", "Sling", "Academy"];

// Reverse the array using toReversed()
let reversed = words.toReversed();

// Log the original and reversed arrays
console.log(words); // ["Welcome", "to", "Sling", "Academy"]
console.log(reversed); // ["Academy", "Sling", "to", "Welcome"]

Reversing a sparse array

This example demonstrates how to reverse a sparse array with the Array.toReversed() method. The original array is not changed by the method. The empty slots in the sparse array are treated as if they have the value undefined.

// Create a sparse array
let sparse = ['Sling Academy', , ,];

// Reverse the sparse array using toReversed()
let reversed = sparse.toReversed();

// Log the original and reversed arrays
console.log(sparse);
// Output: ['Sling Academy', empty × 2]

console.log(reversed); 
// Output:  [undefined, undefined, 'Sling Academy']

A sparse array is an array that has some empty slots, which are treated as if they have the value undefined. The Array.toReversed() method reverses the order of the elements in the array, including the empty slots. This means that the first element of the original array becomes the last element of the reversed array, and vice versa. The empty slots are also reversed, so they appear at the beginning of the reversed array. This can be useful if you want to manipulate the order of a sparse array without changing its length or structure.