[Go Make Things] The new Array.prototype.toReversed() method in vanilla JavaScript

By rahmat hidayat

Tuesday, September 12, 2023

​

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.

Is there a JavaScript or web development topic you'd like to learn more about? Hit reply to this email and let me know.

Cheers,
Chris

​

Want to share this with others or read it later? View it in a browser.​

​

Did someone forward this to you? Get Daily Developer Tips.

Don't want to get these emails? Totally cool. Update your subscriber preferences.

You can also unsubscribe from all emails from me, including updates to products you've purchased.

113 Cherry St #92768, Seattle, WA 98104-2205

Share :

Facebook Twitter Google+ Lintasme