JavaScript toSpliced Function Explained with Examples

The toSpliced function creates a new array without changing the original array in JavaScript. It returns a copy with new values at defined positions and leaves other elements unchanged.

Understand the toSpliced Function in JavaScript

The toSpliced function returns a new array after you cut and insert values at specific positions.

Here is the syntax:

array.toSpliced(startIndex, deleteCount, item1, item2)

• startIndex shows the index to start the cut.
• deleteCount shows how many elements to cut.
• You add new values after these two arguments.
  The output will be a fresh array with your changes.

It creates a copy and executes your edits in a new array.

Here is a quick example:

const numbers = [1, 2, 3, 4];
const newNumbers = numbers.toSpliced(1, 2, 9, 10);
console.log(newNumbers);

This returns [1, 9, 10, 4] , and the original array stays [1, 2, 3, 4].

You can create changes to data lists for user interfaces or logs.

The Difference Between splice and toSpliced

The splice function edits the original array directly and changes its content while the toSpliced function creates a new array with the change and keeps the original one stay as it.

Here is a table that shows you the key differences:

You can use the splice function for direct edits where you need the change in the original array.

Use the toSpliced function for edits where you must keep the source array unchanged.

Examples

Replace Elements in a Copy:

const fruits = ['apple', 'banana', 'cherry'];
const copy = fruits.toSpliced(1, 1, 'mango');
console.log(copy);

It removes one element at index one, then it adds a new value, and the original stays the same.

Insert Values Without Deletion:

const letters = ['a', 'b', 'c'];
const newLetters = letters.toSpliced(1, 0, 'x', 'y');
console.log(newLetters);

This makes a new array and puts two letters at index one. It keeps the original as it is.

Remove Multiple Values from a Copy:

const data = [10, 20, 30, 40, 50];
const result = data.toSpliced(1, 3);
console.log(result);

This removes three values starting at index one from a copy and keeps the original one.

Advanced Insert and Remove:

const records = [100, 200, 300, 400, 500];
const thisCopy = records.toSpliced(2, 2, 999, 888, 777);
console.log(thisCopy);

This edits a copy with three new values at index two after two removals and leaves the source untouched.

Wrapping Up

You learned what toSpliced does and how it differs from splice.

The toSpliced creates a new array with changes, while splice edits the original array directly.

FAQs

const arr = [1, 2, 3, 4];
const newArr = arr.toSpliced(1, 2);
console.log(newArr); // [1, 4]
console.log(arr);    // [1, 2, 3, 4]

array.toSpliced(start, deleteCount, item1, item2, ...)

const arr1 = [10, 20, 30];
const arr2 = arr1.splice(1, 1);
console.log(arr1); // [10, 30]

const arr3 = [10, 20, 30];
const arr4 = arr3.toSpliced(1, 1);
console.log(arr3); // [10, 20, 30]
console.log(arr4); // [10, 30]

const arr = [5, 10, 20];
const result = arr.toSpliced(1, 0, 15, 18);
console.log(result); // [5, 15, 18, 10, 20]
console.log(arr);    // [5, 10, 20]

Similar Reads