Splice! Slice! Shoot, I meant Shift!
Tags: webdev, javascript, learning, productivity
Published: 2019-07-30 12:14:32

---
title: Splice! Slice! Shoot, I meant Shift!
published: true
description: Figuring out what array manipulation function to use in JavaScript is such a common joke at this point. There are a lot of them, and most of them seem to start with an 's'! Let's dive into a handful of these functions.
tags: webdev, javascript, learning, productivity
cover_image: https://thepracticaldev.s3.amazonaws.com/i/10dcby1hv0y4o314flwv.png
canonical_url: https://tenmilesquare.com/splice-slice-shoot-i-meant-shift/
---

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:
{% twitter 1139530549159170049 %}

Or this one:

{% twitter 1144334474269908994 %}


Or even this one:

{% twitter 1138473999208464386 %}

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).

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.
```javascript
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.
```javascript
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.

{% link https://dev.to/laurieontech/deep-vs-shallow-copy-with-examples-cfb %}

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.
```javascript
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.

```javascript
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.

```javascript
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. 

```javascript
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.

```javascript
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.

```javascript
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.

{% link https://dev.to/laurieontech/deep-vs-shallow-copy-with-examples-cfb %}

{% link https://dev.to/laurieontech/introducing-object-fromentries-1d5l %}