[Go Make Things] The new Array.prototype.toSpliced() method in vanilla JS

Tuesday, September 12, 2023

This week, we're looking at new JavaScript methods in ES2023.

Yesterday, we covered the Array.prototype.toReversed() method. Today, we're looking at the Array.prototype.toSpliced() method.

Let's dig in!

Splicing arrays with the `Array.prototype.splice()` method

The Array.prototype.splice() method is used to add, remove, and replace items in an array. When using the method, the original array is modified.

The first argument is the index of the item you want to modify in the array, and is the only required argument. The second argument is the number of items to delete from the array. It can be a number from 0 through the length of the array.

If you omit the second argument, the Array.prototype.splice() method will delete every item in the array from the start index on.

let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];    // This removes 1 item at index 2: "Gandalf"  // wizards is now ["Merlin", "Ursula", "Radagast"]  wizards.splice(2, 1);

Historically, if you want to keep the original array intact, you would clone it first, then splice() it.

let fewerWizards = Array.from(wizards).splice(2, 1);

Creating a spliced copy of an array with the `Array.prototype.toSpliced()` method

The new Array.prototype.toSpliced() does the same thing as Array.prototype.splice(), but creates a copy instead of modifying the original array.

let wizards = ['Merlin', 'Ursula', 'Gandalf', 'Radagast'];  let lessWizards = wizards.toSpliced(2, 1);    // logs ['Merlin', 'Ursula', 'Gandalf', 'Radagast']  console.log(wizards);    // logs ['Merlin', 'Ursula', 'Radagast']  console.log(lessWizards);

Here's a demo.

Browser support (and a polyfill)

While the Array.prototype.toSpliced() is supported in all major browsers, it's still too new to use without a polyfill, in my opinion.

Here's a polyfill you can use until browser support catches up…

if (!Array.prototype.toSpliced) {  	Array.prototype.toSpliced = function (...args) {  		return Array.from(this).splice(...args);  	};  }

Once it does, you can delete the polyfill without having to refactor your 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

.