Method
Introduction to JavaScript Array splice() Method
The JavaScript Array splice() method is a powerful tool that allows you to add and remove items from an array in place. It is one of the core methods that is used to manipulate arrays and can be used to achieve a variety of tasks. In this tutorial, we will cover what the splice() method does, and how to use it.
What Does the splice() Method Do?
The splice() method is used to add and remove items from an array in place. It accepts up to three arguments, with the first argument being the index position of where you want to start making changes. The second argument is the number of items you want to delete, and the third argument is an optional item or items you want to add.
How to Use the splice() Method
The splice() method can be used to add and remove items from an array in one go. It accepts up to three arguments, with the first argument being the index position of where you want to start making changes. The second argument is the number of items you want to delete, and the third argument is an optional item or items you want to add.
Example 1: Removing Items from an Array with splice()
Let’s say we have an array of fruits:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let fruits = ["apple", "banana", "orange", "pear", "strawberry"];
[/dm_code_snippet]
If we want to remove the “banana” item from the array, we can use the splice() method like so:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
let removedItem = fruits.splice(1, 1); // fruits = ["apple", "orange", "pear", "strawberry"]
[/dm_code_snippet]
We can see that the item at index 1 (“banana”) was removed from the array and stored in the removedItem variable.
Example 2: Adding Items to an Array with splice()
Now let’s say we want to add a new fruit to the array. We can use the splice() method like so:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
fruits.splice(2, 0, "mango"); // fruits = ["apple", "banana", "mango", "orange", "pear", "strawberry"]
[/dm_code_snippet]
We can see that the item “mango” was added to the array at index 2.
Example 3: Replacing Items in an Array with splice()
Finally, let’s say we want to replace the “orange” item with “grapefruit”. We can use the splice() method like so:
[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
fruits.splice(3, 1, "grapefruit"); // fruits = ["apple", "banana", "mango", "grapefruit", "pear", "strawberry"]
[/dm_code_snippet]
We can see that the item at index 3 (“orange”) was replaced with the item “grapefruit”.
Conclusion
The JavaScript Array splice() method is a powerful tool that allows you to add and remove items from an array in place. It accepts up to three arguments, with the first argument being the index position of where you want to start making changes. The second argument is the number of items you want to delete, and the third argument is an optional item or items you want to add. This tutorial has covered how to use the splice() method to add, remove, and replace items in an array.
