Today I've been delving into different ways to add to, subtract from and in general modify arrays. The methods splice() and slice() have particularly caught my attention, especially because their names are so similar that when I first read about slice() I thought, Wait, what? I thought splice() removed and changed stuff within an array? A few minutes later I noticed the missing P.
How To Remove Elements from an Array with splice()
If we want to remove the last element from an array, we can use pop() (I love its suggestive name). For the first element, we can use shift() (I don't like this name as much, but it's still useful). But what happens when we want to remove elements in the middle of the array? Or if we want to remove more than one element at once?
Here's where splice() comes into play. This method takes at least one argument and up to... as many as you want, really, but for removing purposes, it'll take up to two. The first argument is the index where splice() will start removing and the second one is the number of elements it'll delete. In return, splice() will give us an array with the removed elements.
So let's look at an example:
let ourArr = [1, 2, 3, 4, 5, 6, 7, 8] //An array with 8 elements
let splicedStuff = ourArr.splice(3, 3) //We remove 3 elements starting from index 3
console.log(ourArr) //1,2,3,7,8
console.log(splicedStuff) //4,5,6
As we can see in the log, ourArr has now five elements instead of eight, and the values from the indexes 3-5 have been copied into splicedStuff.
If we omitted the second argument, however, splice() would delete all the elements from the starting index to the end of the array.
let ourArr = [1, 2, 3, 4, 5, 6, 7, 8]; //Our known array
let splicedStuff = ourArr.splice(3) //We remove all the elements starting from index 3
console.log(ourArr) //1,2,3
console.log(splicedStuff) //4,5,6,7,8
But wait, there's more to it! It can also replace the elements it removes with new elements.
How To Replace Elements in an Array using splice()
We just need to add one or more arguments after the second with elements to be added in place of the ones we remove. Note that we don't need to replace all the elements we remove.
let ourArr = [1, 2, 3, 4, 5, 6, 7, 8];
let splicedStuff = ourArr.splice(3, 3, 'four', 'five') //This time, we replace two of the three elements we remove
console.log(ourArr) //1,2,3,four,five,7,8
console.log(splicedStuff) //4,5,6
How To Partially Copy an Array with slice()
If we want to copy something from an array but leave the original array untouched, we can use the method slice() indicating the beginning and the end. Note that the beginning is inclusive but the end is exclusive (that is, it won't be copied).
let ourArr = [1, 2, 3, 4, 5, 6, 7, 8]; //Let's start with the same array, 'cause why not?
let slicedStuff = ourArr.slice(3, 6) //We take elements from indexes 3-5
console.log(ourArr) //1,2,3,4,5,6,7,8 original array untouched
console.log(slicedStuff) //4,5,6
Conclusion
Sometimes we might want to remove one or more elements in the middle of an array. When pop() and shift() aren't up to the task, splice() rises to the challenge. It can even replace the removed elements with new ones. If we want to copy something from an array but leave the original untouched, we can use slice().
Top comments (0)