What is the difference between slice and toSpliced?

Understanding Array Manipulation in JavaScript: Slice vs. toSpliced

If you're working with JavaScript, you've likely encountered situations where you need to extract parts of an array or modify it by removing or replacing elements. Two common methods that come up are slice() and toSpliced(). While they both deal with arrays, they have fundamental differences in how they operate and what they return. Let's break down what each one does and when you'd choose one over the other.

The slice() Method: Non-Destructive Extraction

The slice() method is your go-to when you want to get a portion of an array without changing the original array. Think of it like making a photocopy of a section of a document – the original remains untouched.

Here's how it works:

• Syntax: array.slice(startIndex, endIndex)
• Purpose: It extracts a shallow copy of a portion of an array into a new array.
• Arguments:
  • startIndex (optional): The index at which to begin extraction. If omitted, slicing starts from index 0. If negative, it indicates an offset from the end of the array (e.g., -1 is the last element).
  • endIndex (optional): The index before which to end extraction. The element at endIndex is not included. If omitted, slicing goes to the end of the array. If negative, it indicates an offset from the end of the array.
• Return Value: A new array containing the extracted elements. The original array is not modified.

Examples of slice():

Let's say we have an array:

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

Example 1: Extracting from index 1 up to (but not including) index 3

const slicedFruits1 = fruits.slice(1, 3);

console.log(slicedFruits1); // Output: ["Banana", "Cherry"]

console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Date", "Elderberry"] (Original array is unchanged)

Example 2: Extracting from index 2 to the end

const slicedFruits2 = fruits.slice(2);

console.log(slicedFruits2); // Output: ["Cherry", "Date", "Elderberry"]

Example 3: Using negative indices

const slicedFruits3 = fruits.slice(-2); // Extracts the last 2 elements

console.log(slicedFruits3); // Output: ["Date", "Elderberry"]

const slicedFruits4 = fruits.slice(1, -1); // Extracts from index 1 up to the second to last element

console.log(slicedFruits4); // Output: ["Banana", "Cherry", "Date"]

The toSpliced() Method: Destructive Modification and New Array Creation

The toSpliced() method, which is a newer addition to JavaScript (introduced in ECMAScript 2026), offers a more powerful way to manipulate arrays. Unlike slice(), toSpliced() modifies the original array but then returns a new array with the changes. It's a bit of a hybrid – it splices into the original but gives you a clean new version of the modified array.

Think of it like editing a document and then saving a "Save As" version. The original file still exists, but you have a new file with your edits.

Here's the breakdown:

• Syntax: array.toSpliced(startIndex, deleteCount, item1, item2, ...)
• Purpose: It changes the contents of an array by removing or replacing existing elements and/or adding new elements in place, and then returns a new array with the changes.
• Arguments:
  • startIndex: The index at which to start changing the array.
  • deleteCount (optional): An integer indicating the number of elements in the array to remove from startIndex. If deleteCount is omitted or is 0, no elements are removed. If it's larger than the number of elements from startIndex to the end of the array, all elements from startIndex to the end will be deleted.
  • item1, item2, ... (optional): The elements to add to the array, beginning from startIndex. If you don't specify any items, toSpliced() will only remove elements.
• Return Value: A new array containing the modified elements. The original array is modified.

Examples of toSpliced():

Let's use the same `fruits` array:

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];

Example 1: Removing one element starting from index 2

const splicedFruits1 = fruits.toSpliced(2, 1); // Removes "Cherry"

console.log(splicedFruits1); // Output: ["Apple", "Banana", "Date", "Elderberry"]

console.log(fruits); // Output: ["Apple", "Banana", "Date", "Elderberry"] (Original array is modified)

Example 2: Replacing elements starting from index 1

const splicedFruits2 = fruits.toSpliced(1, 2, "Blueberry", "Cranberry"); // Removes "Banana" and "Cherry", adds "Blueberry" and "Cranberry"

console.log(splicedFruits2); // Output: ["Apple", "Blueberry", "Cranberry", "Date", "Elderberry"]

console.log(fruits); // Output: ["Apple", "Blueberry", "Cranberry", "Date", "Elderberry"] (Original array is modified)

Example 3: Adding elements without removing any

const splicedFruits3 = fruits.toSpliced(2, 0, "Grape", "Guava"); // Inserts "Grape" and "Guava" at index 2

console.log(splicedFruits3); // Output: ["Apple", "Banana", "Grape", "Guava", "Cherry", "Date", "Elderberry"]

console.log(fruits); // Output: ["Apple", "Banana", "Grape", "Guava", "Cherry", "Date", "Elderberry"] (Original array is modified)

Note: Before ECMAScript 2026, the `splice()` method was used for the same destructive modification, but it only returned the deleted elements, not the modified array. `toSpliced()` is the modern, more convenient way to achieve this behavior.

Key Differences Summarized

Here’s a quick comparison:

Feature	slice()	toSpliced()
Modifies Original Array?	No	Yes
Returns	A new array with extracted elements.	A new array with the modified contents.
Primary Use Case	Extracting sub-arrays without altering the original.	Modifying an array (removing, replacing, or adding elements) while getting a new array reflecting these changes.
Analogy	Photocopying a section.	Editing a document and "Save As".
Availability	Older, widely supported.	Newer (ECMAScript 2026), might require polyfills for older environments.

When to Use Which:

• Use slice() when you need a portion of an array and want to keep the original array exactly as it is. This is common for tasks like displaying a subset of data or iterating over a specific range.
• Use toSpliced() when you intend to modify the array (remove, add, or replace elements) and want a new array that reflects those changes, while also being mindful that the original array will be altered. This is useful when you need a mutated version of the array for subsequent operations but want to preserve the state of the original for other purposes or debugging.

Frequently Asked Questions (FAQ)

How does toSpliced() differ from the older `splice()` method?

The main difference is what they return. The older `splice()` method modifies the original array but returns an array of the *deleted* elements. `toSpliced()` also modifies the original array, but it returns a *new array* containing the entire modified contents. This makes `toSpliced()` more convenient when you want the resulting modified array.

Why would I choose slice() if toSpliced() also returns a new array?

You choose `slice()` specifically when you do not want to modify the original array at all. If your goal is just to grab a piece of the array for reading or further processing without touching the source, `slice()` is the correct and safer choice. `toSpliced()` will always alter the original array.

Can I use negative indices with both slice() and toSpliced()?

Yes, both methods support negative indices. Negative indices count from the end of the array. For example, `-1` refers to the last element, `-2` to the second to last, and so on. This allows for flexible selection of elements from either the beginning or end of the array.