Introduction
The splice() method is one of the most useful functions when working with Arrays in JavaScript. In this article, I'll explain all the different ways in which you can use the splice() method.
The splice() method is used to remove one or more elements from an array. It can also be used to insert elements to an array. Now, let us take a closer look at how we do these:
Remove elements from an array
The splice() method has 3 arguments. However, we will need only the first two arguments to be able to remove the elements from an array. Take a look at the following example:
let arr = ["apples", "cherries", "oranges"];
arr.splice(1, 2);
console.log(arr);
Output:
The first argument of the splice() method is the index of the element that is to be removed. The second argument is the number of elements to be removed from the index defined in the first argument.
Here, the index to start removing elements is 1, and the number of elements to be removed is 2. The array initially had 3 items in it, ["apples", "cherries", "oranges"]. After using arr.splice(1, 2), it contains only ["apples"].
Note! To remove a single element from an array using
splice()method, you must use define both the arguments. If you wanted to remove the 2nd item, you must do it like this:arr.splice(1, 1). If you don't specify the second argument,splice()will remove all elements starting from the index specified.
Inserting elements into an array at desired position
This is where the 3rd argument comes into play. To insert an element at a desired position, you need to supply the arguments to the splice() method in the following way:
- The first argument is given the index of the position, where you want to insert the element.
- The second argument is set to
0. This is to ensure it doesn't remove any elements. - The element is passed as the third argument.
The third argument can be a single element or a list of elements. The number of elements you can pass is practically unlimited, after the second argument. They will all be inserted at the index specified in the first argument.
Let us look at an example,
let arr = ["pizza", "burger", "fries"];
arr.splice(1, 0, "coffee", "cereal");
console.log(arr);
Output:
Here, we set the first argument as 1 (the second position in array). We set the second argument as 0. And, finally, we sent two strings as a list of arguments to be inserted. This inserted the elements, "coffee", "cereal", at the second position.
Note! The elements, previously in the 2nd and 3rd elements were shifted automatically to make space for the new elements. This is quite a powerful feature, as writing code to achieve this can be very complex.
More
The splice() method returns an array of elements removed, whenever it is used. It returns an empty array when it used for inserting elements.
Example:
let arr = ["pizza", "burger", "fries"];
console.log(arr.splice(1, 1));
Output:
Conclusion
In this article, we have covered how to remove from an array, and insert elements into an array, using JavaScript's splice()method.
Thank You for Reading!
Have doubts about anything discussed in this article?
Let me know in the comments below!
Feel free to connect with me on Twitter or LinkedIn
Or, visit my website
Happy Coding!