Today I've been delving into different ways to add to, subtract from and in general modify arrays. The methods
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.
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?
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
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.
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
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
Sometimes we might want to remove one or more elements in the middle of an array. When
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