The new Array.prototype.toReversed() method in vanilla JavaScript

The latest “version” of vanilla JavaScript (ES2023 or ES14) came out this summer, and a handful of new Array methods are now supported in all browsers. Over the next few days, I wanted to highlight a few of them.

Today, we’re looking at the Array.prototype.toReversed() method, which creates a copy of an array, then runs the Array.prototype.reverse() method on it, leaving the original intact.

Let’s dig in!

Creating a reversed copy with the Array.prototype.toReversed() method

Let’s say you have an array of wizards.

let wizards = ['Merlin', 'Ursula', 'Gandalf'];

The Array.prototype.reverse() method modifies the original array.

wizards.reverse();

// logs ["Gandalf", "Ursula", "Merlin"]
console.log(wizards);

Historically, if you wanted to create a reversed copy of the array instead of modifying the original, you would have to clone it first, then reverse it.

let reverseWizards = Array.from(wizards).reverse();

// logs ["Gandalf", "Ursula", "Merlin"]
console.log(reverseWizards);

// logs ["Merlin", "Ursula", "Gandalf"]
console.log(wizards);

The new Array.prototype.toReversed() method simplifies that into a single step.

let reverseWizards = wizards.toReversed();

// logs ["Gandalf", "Ursula", "Merlin"]
console.log(reverseWizards);

// logs ["Merlin", "Ursula", "Gandalf"]
console.log(wizards);

Here’s a demo.

Browser support (and a polyfill)

The Array.prototype.toReversed() method is now supported in all major browsers.

But… it is really new, and not everyone updates their browsers regularly. In particular, browser updates on mobile devices are often tied to updating the entire OS. Someone running an older version of iOS, for example, won’t have support for this method.

For now, that means I’ll either continue to use the two-step process, or add a polyfill that I can remove later when browser support gets better. Here’s one you can use…

if (!Array.prototype.toReversed) {
	Array.prototype.toReversed = function () {
		return Array.from(this).reverse();
	};
}

This checks if the browser supports the new Array.prototype.toReversed() method, and if not, creates a new method with the desired behavior. You can then use the method in unsupported browsers.

When support gets good enough, you can remove the polyfill without having to refactor any code.