JavaScript - Array toSpliced() Method

In JavaScript, the Array.toSpliced() method is used to modify an array by removing or replacing existing elements and/or adding new elements. This method is similar to the JavaScript Array.splice() method.

The toSpliced() method modifies multiple array elements: it removes the given number of elements from the array, starting at a given index, and then inserts the given elements at the same index. This method does not modify/overwrite the original array; instead, it returns a new array.

Syntax

Following is the syntax of JavaScript Array.toSpliced() method −

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

Parameters

This method takes the following parameters −

start − The index at which to start changing the array.
deleteCount (optional) − The number of elements to remove. If omitted or 0, no elements are removed.
item1, item2, ...,itemN (optional) − The elements to add to the array at the start index.

Return value

This method returns a new array which contains the modified elements.

Examples

Example 1

In the following example, we are using the JavaScript Array toSpliced() method to remove all the array elements, starting from the index postion 2.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2);
      document.write(result);
   </script>
</body>
</html>

After executing the program, all the elements from index position 2 are removed.

Output

apple,banana

Example 2

If the 'deleteCount' parameter of the toSpliced() method is provided as 0, no element will be removed from the animals array.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0);
      document.write(result);
   </script>
</body>
</html>

Output

As we can see the output, no element has been removed from the array.

apple,banana,cherry,dates

Example 3

The below program removes 0 (zero) elements before index position 2, and inserts the new element "Pineapple".

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0, "Pineapple");
      document.write(result);
   </script>
</body>
</html>

Output

As we can see the output, the element Pineapple is inserted at index postion 2 without removing any exising element.

apple,banana,Pineapple,cherry,dates

Example 4

The following program removes 0 (zero) elements before index position 2, and inserts two new elements i.e. Pineapple and Grapes.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 0, "Pineapple", "Grapes");
      document.write(result);
   </script>
</body>
</html>

The elements Pineapple and Grapes are inserted at index postion 2 without removing any exising element.

Output

apple,banana,Pineapple,Grapes,cherry,dates

Example 5

In the following example, we are removing 2 elements, starting from the index position 2.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 2);
      document.write(result);
   </script>
</body>
</html>

After executing the program, it removed cherry and dates from the array.

Output

apple,banana

Example 6

Here, we are removing 1 element at index position 2, and inserting a new element Grapes.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 1, "Grapes");
      document.write(result);
   </script>
</body>
</html>

After executing the program, the element cherry will be removed and Grapes will be inserted in that index.

Output

apple,banana,Grapes,dates

Example 7

In this example, we are removing 1 element at index position 2, and inserting two new elements Grapes and Pineapple.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(2, 1, "Grapes", "Pineapple");
      document.write(result);
   </script>
</body>
</html>

After executing the program, the element cherry will be removed and the elements Grapes and Pineapple will be inserted.

Output

apple,banana,Grapes,Pineapple,dates

Example 8

Here, we are removing 1 element from index -2 (counts from end of the array).

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(-2, 1);
      document.write(result);
   </script>
</body>
</html>

After executing the program, the element cherry will be removed.

Output

apple,banana,dates

Example 9

Here, we are removing 1 element from index -2 (counts from end of the array), and inserting two new elements Pineapple and Grapes.

<html>
<body>
   <script>
      let fruits = ['apple', 'banana', 'cherry', 'dates'];
      let result = fruits.toSpliced(-2, 1, "Pineapple", "Grapes");
      document.write(result);
   </script>
</body>
</html>

After executing the program, the element cherry will be removed and Pineapple and Grapes will be removed.

Output

apple,banana,Pineapple,Grapes,dates