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. However, 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 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 that the new elements will be inserted. - The second argument is zero (0) that 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 actually 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 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 to 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 by 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.