There is a bit of a joke in the land of JavaScript that arrays have one too many functions with scarily similar names. You may have seen this tweet about it:
Or this one:
Or even this one:
So with that introduction, let's look at what they are and the differences between them!
Splice
Splice can actually do a whole bunch of things. That's because it takes up to three arguments(that's not entirely accurate, but you'll see why in a moment). Let's start with just the first.
Single Argument
The first argument is an index. If you pass in only that argument, splice will remove all elements in your array after and including the listed index. (In this case you might think of it as a number of elements left in the array, starting from the first).
let content = ['post', 'tweet', 'video', 'talk']
let removed = content.splice(2)
// content is ['post', 'tweet']
// removed is ['video', 'talk']
In this example only two elements are left. From the first element in the array, index zero, up until it hit the specified index, two.
Two Arguments
The second argument is the number of elements that you want to remove. This count begins with the index given in the first argument. Let's look at a couple of examples.
let content = ['post', 'tweet', 'video', 'talk']
let removed = content.splice(1, 2)
// content is ['post', 'talk']
// removed is ['tweet', 'video']
You can also use negative indices.
let content = ['post', 'tweet', 'video', 'talk']
let removed = content.splice(-1, 1)
// content is ['post', 'tweet', 'video']
// removed is ['talk']
Three+ Arguments
The final argument(s) are the elements you want to add. These elements will be added starting with the index specified in the first argument. Let's start with an example in which our second argument is 0, so we aren't removing anything.
let content = ['post', 'tweet', 'video', 'talk']
content.splice(1, 0, 'dev')
// content is ['post', 'dev', 'tweet', 'video', 'talk']
You can also add more than one element at a time.
let content = ['post', 'tweet', 'video', 'talk']
content.splice(1, 0, 'dev', 'ten mile')
// content is ['post', 'dev', 'ten mile', 'tweet', 'video', 'talk']
Finally, you can add and remove elements at the same time.
let content = ['post', 'tweet', 'video', 'talk']
let removed = content.splice(1, 2, 'dev', 'ten mile')
// content is ['post', 'dev', 'ten mile', 'talk']
// removed is ['tweet', 'video']
As you can see in these examples, splice() modifies the array itself.
Slice
Slice makes a shallow copy of an array. If you need a refresh on what a shallow copy is, check out this post.
This copy is a subset of the original. As with splice, slice has multiple arguments, in this case two, and none are required.
No Arguments
If you use slice without any arguments at all it will operate as if you were shallow copying the entire array.
let social = ['twitter', 'instagram', 'facebook', 'myspace']
let sliced = social.slice()
// social is ['twitter', 'instagram', 'facebook', 'myspace']
// sliced is ['twitter', 'instagram', 'facebook', 'myspace']
Single Argument
The first argument is an index. The copy will start at the given index and include all elements beyond it.
let social = ['twitter', 'instagram', 'facebook', 'myspace']
let sliced = social.slice(1)
// social is ['twitter', 'instagram', 'facebook', 'myspace']
// sliced is ['instagram', 'facebook', 'myspace']
Note that unlike the splice examples, the original array remains unchanged.
Two Arguments
The second argument is also an index, but it specifies the ending point of the copied array.
let social = ['twitter', 'instagram', 'facebook', 'myspace']
let sliced = social.slice(1,3)
// social is ['twitter', 'instagram', 'facebook', 'myspace']
// sliced is ['instagram', 'facebook']
Again, social is unchanged. This is always the case when using slice.
Shift
Shift doesn't take any arguments. It is there to remove the first element of a given array. However, unlike slice, though similar to splice, it manipulates the array directly.
let antisocial = ['tv shows', 'movies', 'puzzles', 'board games']
let firstElement = antisocial.shift()
// antisocial is ['movies', 'puzzles', 'board games']
// firstElement is ['tv shows']
And that's really all it does!
Split
To be honest, this one isn't really that similar. However, it's included in my original tweet, so I'm briefly mentioning it here!
Split takes a string and uses a delimiter to break it up into array elements. Something like this.
let msg = 'what sentence can I use for this example'
let split = msg.split(' ')
// [
// 'what', 'sentence',
// 'can', 'I',
// 'use', 'for',
// 'this', 'example'
// ]
The reason it might be considered somewhat similar is that if you don't pass any arguments, you get a copy of the string inside an array.
let msg = 'what sentence can I use for this example'
let copy = msg.split()
// [ 'what sentence can I use for this example' ]
And that's the only functionality it has.
Sarah Drasner is here to save us
It's ok to forget all of this as soon as you've read it. Want to know why? The incredible @sarah_edo made an awesome tool called the Array Explorer! Next time you're looking to manipulate an array and can't remember what function you want, give it a try.
https://sdras.github.io/array-explorer/
And yes, I know I'm cruel for having you read all this and then giving you the magic bullet. But learning is good!
Bye for now
So there we have it. As always, if you're looking for similar content, check out some of these posts.
Top comments (6)
I had this experience when I was just beginning to understand javascript, at the same time I was exploring Vue. I got into situation where I assigned a variable to a spliced array, and I was so dumb wondering why does both arrays are changing even if I just manipulated one of them.
I was googling for answers but I wasn't able to see a solution - soooo I ended up using Json Stringify and Parse. When I assign the array to a variable, I, first, Stringify it and then Parse it (just to make a "shallow" copy). Yea, funny right? Months later I accidentally found out the solution of the problem while reading some article. That "months later" is today, and the "article" is yours. Thanks a lot. .slice() FTW! \m/
So glad it helped! Sorry it came a little late 😅
It's perfect. Thaaaaanks.
Always have to look up which one I want too!
Which one mutated again? .splice? .slice?
In a similar vein of mild frustration:
I hate the person that made .substring and .substr happen. They are similar, but not quite. But the name is SO similar.
What's the difference between
.shift()and.pop()?Pop() removes an item from the end of the array and shift() removes an item from the beginning of it.