• JavaScript Video Tutorials

JavaScript - Array splice() Method

The JavaScript Array.splice() method is used to modify the contents of an array by removing or replacing existing elements or adding new elements. It accepts parameters as the starting index, the no.of elements to be removed, and elements to add(optional). Then it returns an array containing the removed elements. For example, array.splice(3, 5) removes five elements starting from index 3.

This method does not create a new array for result instead, it overwrites the original array.

Syntax

Following is the syntax of JavaScript Array splice() method −

array.splice(start, deleteCount, item1, item2, ..., itemN)

Parameters

This method accepts three parameters. The same is described below −

  • start − The index at to add or remove elements. If negative, it counts from the end of the array.
  • deleteCount − This specifies the number elements to be removed in the array. If it is 0, no elements are removed.
  • item1, ..., itemN − The elements to add to the array, beginning from the start index.

Return value

This method returns an array containing the deleted elements. If no elements are deleted, it returns an empty array.

Examples

Example 1

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

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

Output

Lion,Cheetah

Example 2

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2, 0);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

Output

Lion,Cheetah,Tiger,Elephant,Dinosaur

Example 3

The following program removes 0 (zero) elements before index position 2, and inserts the new element “Elephant”.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 0, "Elephant");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

Output

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

Lion,Cheetah,Elephant,Tiger

Example 4

The following program removes 0 (zero) elements before index position 2, and inserts two new elements i.e. “Elephant” and “Dinosaur”.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 0, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

Output

As we can see the output, the elements “Elephant” and “Dinosaur” is inserted at index postion 2 without removing any exising element.

Lion,Cheetah,Elephant,Dinosaur,Tiger

Example 5

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(2, 2);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

After executing the program, the splice() method removed “Tiger” and “Dinosaur” from the array.

Output

Lion,Cheetah,Dinosaur

Example 6

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 1, "Elephant");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

After executing the program, the element “tiger” will be removed and “elephant” will be inserted in that index.

Output

Lion,Cheetah,Elephant

Example 7

Here, we are removing 1 element at index position 2, and inserting two new elements “Elephant” and “Dinosaur”.

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(2, 1, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

After executing the program, the element “tiger” will be removed and the elements “elephant” and “Dinosaur” will be inserted.

Output

Lion,Cheetah,Elephant,Dinosaur

Example 8

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger", "Elephant", "Dinosaur"];
      const result = animals.splice(-2, 1);
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

After executing the program, the element “Elephant” will be removed.

Output

Lion,Cheetah,Tiger,Dinosaur

Example 9

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

<html>
<body>
   <p id="demo"></p>
   <script>
      const animals = ["Lion", "Cheetah", "Tiger"];
      const result = animals.splice(-2, 1, "Elephant", "Dinosaur");
      document.getElementById("demo").innerHTML = animals;
   </script>
</body>
</html>

After executing the program, the element “Cheetah” will be removed and “Elephant” and “Dinosaur” will be removed.

Output

Lion,Elephant,Dinosaur,Tiger
Advertisements