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.

Deep vs Shallow Copy - with Examples

Laurie ・ Jul 24 '19

#javascript #webdev #learning #beginners

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.

Deep vs Shallow Copy - with Examples

Laurie ・ Jul 24 '19

#javascript #webdev #learning #beginners

Introducing Object.fromEntries

Laurie ・ Jul 2 '19

#javascript #webdev #learning #productivity