Vanilla (JS) Slice, Splice, Baby
Bad pun aside, let’s talk about two common methods within JavaScript: Splice and Slice. Both are methods used to update items in an array, but they have some slight differences. Let’s take a look!
Splice
The basic formula for the Splice method can take up to three essential arguments and looks something like this:
array.splice(start, deleteCount, newItem)The Arguments
Start represents the index at which you’d like to start changing the array.
deleteCount represents the number of items you’d like to remove from the array beginning at the start value. Two things to note about deleteCount. 1.) If the deleteCount is omitted or is a value greater than or equal to array.length — start, then all items from the start value to the end of the array will be deleted. 2.) If deleteCount is 0 or negative, then no items will be deleted.
newItem represents any new item you’d like to add to the array beginning at the start value. Two notes for this. 1.) There can be more than one value in this argument if you need to add multiple items to the array. 2.) This value may be omitted if only removing items from an array.
Let’s say we have the following array, and want to add 0 to the front. Using the formula above, we’ll need to have a start index, the number of items we want to delete and the new item we want to add. The array and the method would look like this.
let numbers = [1,2,3,5]numbers.splice(0, 0, 0)
// we want to start at index 0, remove 0 items, and add 0 as the new item
Perfect. It added 0 to the front! Let’s trying inserting the number 4 at 4th index between numbers 3 and 5. Again, using the 3 arguments(start, deleteItem, newItem)
Sweet! Now, let’s say we want to remove numbers 2 and 3. Our method would look almost the same, except we can omit the addItem, since we’re only deleting.
Notice how when deleting, the return value of the Splice method is an array of the deleted items, and the original array has been destructively updated.
Slice
Slice operates almost exactly the same as Splice minus two differences: 1.) Slice cannot insert or add items to the array. 2.) Slice returns a copy of the array that’s been manipulated; the original array stays in tact. It IS NOT destructive.
The basic formula for the Slice method can take up to two essential arguments and looks something like this:
array.slice(start, end)Start represents the index at which you’d like to start changing the array.
End represents the index at which you’d like to end changing the array. If no end value is given, then all elements from the start value to the end of the array will be deleted
Like the example above, lets take a numbers array and delete the numbers 2 and 3.
let numbers = [0,1,2,3,4,5]numbers.slice(2,4)
//we want to start removing items starting at index 2 and stopping at index 4
Notice how an array of the numbers 2 and 3 are the return value, like Splice, but the original numbers array has been untouched!
Conclusion
Both the Splice and Slice methods are great to use, but each have their own quirks. Let’s walk away remembering a few tips on when to use each method. Use Splice if you want to add items to an array and/or destructively update your original array. Use Slice if you want to non-destructively remove items from your original array. And as always, keep an eye out for your return values.
Play around with these two methods, and happy coding!
