Imagine that you have a list of restaurants that you want to try out, and after finally getting dinner at one of them, you don’t just want to cross the restaurant off your list, but you want to remove it completely.
So you remove the restaurant that you’ve tried, and now your original list only has the restaurants you’ve yet to try. Right here, we’ve described one of the things JavaScript splice can do.
What is the JavaScript splice method and what can it do?
Okay, let’s back up a little bit. We’ve described what JavaScript splice can do, but what is it exactly?
The JavaScript splice() method is a built-in method for JavaScript array functions. Splice modifies the original array by removing, replacing, or adding elements. The return value is a new array containing the deleted elements. If no elements are removed, an empty array is returned. The basic syntax for JavaScript splice is:
Array.splice(start, removeCount, newItem, newItem, newItem, ...)
How to remove elements from an array with JavaScript splice
To simply remove an element from an array using JavaScript splice, you would need to know the index number of the element you would like to remove.
Going back to the example we brought up at the beginning of this tutorial. Say our restaurant bucket list consisted of A, B, C, and D, this would be the original array. The restaurant that we tried would be D. To remove D, we would need to know its index number. Since the array index starts at 0, the index would be (X-1). In this case, the index number would be 3.
Now, we can use the JavaScript slice method to remove the restaurant we’ve already visited from the original array:
const restaurants = [“A”, “B”, “C”, “D”] console.log(restaurants.splice(3, 1)) // output: [“D”]
console.log(restaurants) // output: [“A”, “B”, “C”]
Here, we can see that the original array has been spliced into two: the original array with the remaining elements, and the return value is an array with the removed element(s).
To learn more about how to use JavaScript splice to remove elements from an array, check out this blog post.
How to add elements to an array with JavaScript splice
You can add new elements to an array using JavaScript splice as well. Keeping the full splice syntax in mind, you can add new elements by defining the number of elements you’d like to remove as “0” and before declaring the new elements.
For example, let’s add E to our array.
const restaurants = [“A”, “B”, “C”, “D”] console.log(restaurants.splice(3, 0,”E”)) // output: []
console.log(restaurants) // output: [“A”, “B”, “C”, “E”, “D”]
This also works if you’d like to both remove and add elements to your array. For example, let’s remove D from the above array and add F and G in D’s location.
const restaurants = [“A”, “B”, “C”, “D”] console.log(restaurants.splice(3, 0,”E”)) // output: [“D”]
console.log(restaurants) // output: ["A", "B", "C", "F", "G"]
Splice vs Slice: What is the difference between the two JavaScript methods?
One confusion that many JavaScript developers might have is splice vs slice: are they the same? If not, what is the difference? They sound awfully similar!
While both splice and slice are built-in JavaScript methods and sound very similar, they actually play different roles. Both JavaScript splice and slice can be used to manipulate items in an array.
However, as mentioned above, the JavaScript splice method directly modifies the original array, and, if there are any, returns an array of the removed elements. On the other hand, the JavaScript slice method does not modify the original array, but returns a new array that is a “section” of the original array. You can define the “start” and “end” of the selection that you want the slice method to return.
After reading this article, you should have a basic understanding of how to use JavaScript splice. While it looks simple, don’t underestimate all the magic that the splice method can do. If you want to learn more about what you can do with splice, find a mentor to help you master JavaScript step by step!
