JavaScript Tutorials

JavaScript Array toSpliced()
Syntax & Examples

Array.toSpliced() method

The toSpliced() method of the Array class in JavaScript returns a new array with some elements removed and/or replaced at a given index, without modifying the original array.


Syntax of Array.toSpliced()

There are 5 variations for the syntax of Array.toSpliced() method. They are:

1.
toSpliced(start)

Parameters

ParameterOptional/RequiredDescription
startrequiredThe index at which to start changing the array.

This method returns a new array with all elements from the start index to the end of the array removed.

Returns value of type Array.

2.
toSpliced(start, deleteCount)

Parameters

ParameterOptional/RequiredDescription
startrequiredThe index at which to start changing the array.
deleteCountoptionalThe number of elements to remove from the start index.

This method returns a new array with the specified number of elements removed from the start index.

Returns value of type Array.

3.
toSpliced(start, deleteCount, item1)

Parameters

ParameterOptional/RequiredDescription
startrequiredThe index at which to start changing the array.
deleteCountoptionalThe number of elements to remove from the start index.
item1optionalThe element to add to the array, beginning at the start index.

This method returns a new array with the specified number of elements removed from the start index and the specified item added.

Returns value of type Array.

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

Parameters

ParameterOptional/RequiredDescription
startrequiredThe index at which to start changing the array.
deleteCountoptionalThe number of elements to remove from the start index.
item1optionalThe first element to add to the array, beginning at the start index.
item2optionalThe second element to add to the array, beginning at the start index.

This method returns a new array with the specified number of elements removed from the start index and the specified items added.

Returns value of type Array.

5.
toSpliced(start, deleteCount, item1, item2, /* …, */ itemN)

Parameters

ParameterOptional/RequiredDescription
startrequiredThe index at which to start changing the array.
deleteCountoptionalThe number of elements to remove from the start index.
item1optionalThe first element to add to the array, beginning at the start index.
item2optionalThe second element to add to the array, beginning at the start index.
itemNoptionalAdditional elements to add to the array, beginning at the start index.

This method returns a new array with the specified number of elements removed from the start index and the specified items added.

Returns value of type Array.



✐ Examples

1 Using toSpliced() method to remove elements from an array

In JavaScript, we can use the toSpliced() method to remove elements from an array without modifying the original array.

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4, 5].
  2. We use the toSpliced() method on arr with the start index 1 and deleteCount 2 to remove two elements starting from index 1.
  3. The result is stored in the variable newArr.
  4. We log newArr and the original array to the console using console.log() method to see the new array and confirm the original array is unchanged.

JavaScript Program

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

Output

[1, 4, 5]
[1, 2, 3, 4, 5]

2 Using toSpliced() method to add elements to an array

We can use the toSpliced() method to add elements to an array without modifying the original array.

For example,

  1. We define an array variable arr with elements ['a', 'b', 'e'].
  2. We use the toSpliced() method on arr with the start index 2, deleteCount 0, and items 'c' and 'd' to add the elements 'c' and 'd' at index 2.
  3. The result is stored in the variable newArr.
  4. We log newArr and the original array to the console using console.log() method to see the new array and confirm the original array is unchanged.

JavaScript Program

const arr = ['a', 'b', 'e'];
const newArr = arr.toSpliced(2, 0, 'c', 'd');
console.log(newArr);  // Output: ['a', 'b', 'c', 'd', 'e']
console.log(arr);     // Output: ['a', 'b', 'e']

Output

['a', 'b', 'c', 'd', 'e']
['a', 'b', 'e']

3 Using toSpliced() method to replace elements in an array

We can use the toSpliced() method to replace elements in an array without modifying the original array.

For example,

  1. We define an array variable arr with elements [1, 2, 3, 4, 5].
  2. We use the toSpliced() method on arr with the start index 1, deleteCount 2, and items 'a' and 'b' to replace two elements starting from index 1 with 'a' and 'b'.
  3. The result is stored in the variable newArr.
  4. We log newArr and the original array to the console using console.log() method to see the new array and confirm the original array is unchanged.

JavaScript Program

const arr = [1, 2, 3, 4, 5];
const newArr = arr.toSpliced(1, 2, 'a', 'b');
console.log(newArr);  // Output: [1, 'a', 'b', 4, 5]
console.log(arr);     // Output: [1, 2, 3, 4, 5]

Output

[1, 'a', 'b', 4, 5]
[1, 2, 3, 4, 5]

Summary

In this JavaScript tutorial, we learned about toSpliced() method of Array: the syntax and few working examples with output and detailed explanation for each example.