Butchering Arrays (or not) with splice() and slice()
Tags: javascript, beginners, todayilearned
Published: 2019-07-27 16:08:36

Today I've been delving into different ways to add to, subtract from and in general modify arrays. The methods `splice()` and `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.

###How To Remove Elements from an Array with splice()

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?

Here's where `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:

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

If we omitted the second argument, however, `splice()` would delete all the elements from the starting index to the end of the array.

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

###How To Replace Elements in an Array using splice()

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.

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

###How To Partially Copy an Array with slice()

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

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

###Conclusion

Sometimes we might want to remove one or more elements in the middle of an array. When `pop()` and `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 `slice()`.