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.
To delete elements in an array, you pass two arguments to the
splice() method as follows:
position argument specifies the position of the first item to delete and the
num argument determines the number of element to delete.
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, we have an array
scores that contains five numbers from 1 to 5.
var scores = [1, 2, 3, 4, 5];
The following statement deletes three elements of the
scores array starting from the first element.
var deletedScores = scores.splice(0, 3);
scores array now contains two elements.
console.log(scores); // [4, 5]
deletedScores array contains three elements.
console.log(deletedScores); // [1, 2, 3]
The following figure illustrates the
scores.splice(0,3) method call above.
You can insert one or more element into an array by passing three or more arguments to the
splice() method with the second argument is zero.
Consider the following syntax.
In this syntax:
positionargument 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 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, in this case, therefore, it returns an empty array. See the following example.
Assuming that you have an array named
colors with three strings.
var colors = ['red', 'green', 'blue'];
The following statement inserts one element after the second element.
colors.splice(2, 0, 'purple');
colors array now has four elements with the new element inserted at the second position.
console.log(colors); // ["red", "green", "purple", "blue"]
The following figure demonstrates the method call above.
You can insert more than one element by passing the fourth argument, fifth argument, and so on to the
splice() method as in the following example.
colors.splice(1, 0, 'yellow', 'pink');
// ["red", "yellow", "pink", "green", "purple", "blue"]
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 specify the number of items to delete and the third one is 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.
The following statement replaces the second element by a new one.
languages.splice(1, 1, 'Python');
languages array now still has four elements with the new second argument is
'Python' instead of
The following figure illustrates the method call above.
You can replace one element by multiple elements by passing more arguments to the
splice() method as follows:
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.