JavaScript Array splice: Delete, Insert, and Replace

Summary: This tutorial shows you how to use the JavaScript Array’s splice() method to delete existing elements, insert new elements, and replace elements in an array.

JavaScript Array type provides a very powerful splice() method that allows you to insert new elements into the middle of an array. Also, you can use this method to delete and replace existing elements as well.

Deleting elements using JavaScript Array’s splice() method

To  delete elements in an array, you pass two arguments into the splice() method as follows:

Array.splice(position,num);Code language: JavaScript (javascript)

The position specifies the position of the first item to delete and the num argument determines the number of elements to delete.

The splice() method changes the original array and returns an array that contains the deleted elements.

Let’s take a look at the following example.

Suppose, you have an array scores that contains five numbers from 1 to 5.

let scores = [1, 2, 3, 4, 5];Code language: JavaScript (javascript)

The following statement deletes three elements of the scores array starting from the first element.

let deletedScores = scores.splice(0, 3);Code language: JavaScript (javascript)

The scores array now contains two elements.

console.log(scores); //  [4, 5]Code language: JavaScript (javascript)

And the deletedScores array contains three elements.

console.log(deletedScores); // [1, 2, 3]Code language: JavaScript (javascript)

The following figure illustrates the scores.splice(0,3) method call above.

Inserting elements using the JavaScript Array splice() method

You can insert one or more elements into an array by passing three or more arguments to the splice() method with the second argument is zero.

Consider the following syntax.

Array.splice(position,0,new_element_1,new_element_2,...);Code language: JavaScript (javascript)

In this syntax:

• The position specifies the starting position in the array in which the new elements will be inserted.
• The second argument is zero (0) which instructs the splice() method to not delete any array elements.
• The third argument, fourth argument, and so on are the new elements that are inserted into the array.

Note that the splice() method changes the original array. Also, the splice() method does not remove any elements, therefore, it returns an empty array. For example:

Assuming that you have an array named colors with three strings:

let colors = ['red', 'green', 'blue'];Code language: JavaScript (javascript)

The following statement inserts one element after the second element.

colors.splice(2, 0, 'purple');Code language: JavaScript (javascript)

The colors array now has four elements with the new element inserted in the second position.

console.log(colors); // ["red", "green", "purple", "blue"]Code language: JavaScript (javascript)

The following figure demonstrates the method call above.

You can insert more than one element by passing the fourth argument, the fifth argument, and so on to the splice() method as in the following example.

colors.splice(1, 0, 'yellow', 'pink');
console.log(colors); 
// ["red", "yellow", "pink", "green", "purple", "blue"]Code language: JavaScript (javascript)

Replacing elements using the JavaScript Array splice() method

The splice() method allows you to insert new elements into an array while deleting existing elements simultaneously.

To do this, you pass at least three arguments with the second one that specifies the number of items to delete and the third one that indicates the elements to insert.

Note that the number of elements to delete needs not be the same as the number of elements to insert.

Suppose you have an array of programming languages with four elements as follows:

let languages = ['C', 'C++', 'Java', 'JavaScript'];Code language: JavaScript (javascript)

The following statement replaces the second element with a new one.

languages.splice(1, 1, 'Python');Code language: JavaScript (javascript)

The languages array now still has four elements with the new second argument is 'Python' instead of 'C++'.

console.log(languages); 
// ["C", "Python", "Java", "JavaScript"]Code language: JavaScript (javascript)

The following figure illustrates the method call above.

You can replace one element with multiple elements by passing more arguments into the splice() method as follows:

languages.splice(2,1,'C#','Swift','Go');Code language: JavaScript (javascript)

The statement deletes one element from the second element i.e., Java and inserts three new elements into the languages array. The result is as follows.

console.log(languages); // ["C", "Python", "C#", "Swift", "Go", "JavaScript"]Code language: JavaScript (javascript)

In this tutorial, you have learned how to use the JavaScript Array splice() method to delete existing elements, insert new elements, and replace elements in an array.