JavaScript Built In Array Methods .slice() and .splice()
Looking back to my childhood for inspiration, I want to draw a comparison between learning to code and learning the english language. As a child, I couldn’t tell my left from my right. Embarrassing I know. There I am, six years old and walking down a hallway. I ask someone for directions to the bathroom. I think I was in a clinic. The person said “Down the hall and to the left.” I walk down the hall and I look right, then I look left, only I honestly didn’t know which was which. I go right and I walk into a bathroom. Nothing seems out of the ordinary. It wasn’t until on my way out that I saw my mom coming in that I realized I walked into the girls bathroom. It didn’t matter, and it didn’t teach me anything. I would go on to wander the world unsure of how to tell left from right until I was about 10, when it all finally clicked. For me it was realizing that one of my hands was my dominant hand and the other wasn’t. Now fast forward to my journey into coding and I come across a very familiar confusion with two built in array methods; .slice() and .splice().
In this blog I will go over the use cases for array.slice() and array.splice and help create a clear distinction between the two.
Let’s use a sample array.
let sample = [1, 3, 5, 7, 8, 9]
Above we have an array with 6 elements.
First Distinction: Output
Array.slice() returns the selected item or items in an array as a separate copy of the array. Where as Array.splice() returns the removed item or items from an array.
sample.slice(1)
//=> [3,5,7,8,9]
sample.splice(1)
//=> [3]
console.log(sample)
//=> [1,5,7,8,9] Second Distinction: Mutation
One difference to note is that Array.slice() does not mutate the original array while .splice does mutate by removing the selected items from the original array.
Third Distinction: Arguments
Array.slice() can take up to two arguments. The first argument represents the index of where we want our copy of the sample array to start from and the second argument is optional. The second argument represents the index we wish our new copy of the sample array to end. For example:
sample.slice(firstArgument, secondArgument)
sample.slice(1, 4)
//sample = [1,3,5,7,8,9]
| 1 2 3 4 |
0 5
//=> [3,5,7,8]Array.splice() can take up to n arguments. The first argument represents the index of the item we want to return from the array. If no other arguments are provided, we will only return the selected item, given the argument provided.
sample.splice(3)
//=> [7]The second argument represents the number of items we wish to remove including the first argument. If the second argument equals 0 no items are removed. If the second argument equals 3, the three numbers following the first argument will be returned.
sample.splice(1, 2)
//=> [3,5]
//two items are returned
//or
sample.splice(3, 0)
//=> []
// no items are returned The third and any other arguments following, represent new items we wish to add to the original array. So as we splice away objects based on the first two arguments, the following arguments are inserted into the original array.
sample.splice(1, 5, "hope this helps", 43)
//=> [3, 5, 7, 8, 9]
return sample
//=> [1, "hope this helps", 43]May this blog serve as a guide for when you can’t tell your slice from splice. Happy coding.
