Slice or Splice Which one to Use?

In this article we will try to get a clear idea about Slice or Splice which one is better to use…

Slice

Slice is a method on the Array Prototype that you can use to extract a section of a array. Let’s say you want to remove the first two elements from a array. Then you could do something like this:

let myList = [0,1,2,3,4,5,6,7,8,9]
myList = myList.slice(2)

You could of course do the same with a combination of filters and map without using slice:

let myList = [0,1,2,3,4,5,6,7,8,9]
myList = myList.map((value, index) => index => 2 ? value : undefined).filter(val => val!==undefined)

There aren’t much to the slice method, but the key thing is that it doesn’t mutate the array you run it on, but rather it returns a new copy. It takes two arguments: begin and end. If you don’t give it a end it treats the end as to the end of the array. And you can give it a negative number of remove things at the end. For example, like below to remove the last three elements at the end; without doing some weird .length hacks or double reversing.

let myList = [0,1,2,3,4,5,6,7,8,9]
myList = myList.slice(0, -3)

Slice is a very versatile and useful method, when you need to modify a list based on position instead of content. And it much more elegant than some of the other solutions I have seen (and written) to get the same thing. Everything from something like my map + filter hack above to some more advanced uses for the old school for loop.

Splice

Splice is another method on the Array Prototype; it is in many ways Slice’s weird brother in law. The main difference is that splice mutates the array you run it on, while slice does not. I personally never use splice because mutation often lead to unintended circumstances.

The other thing about splice is that you can’t do all of what you can do with slice; for example the cool -1 tricks for removing stuff at the end. This is where it gets a little bit “weird”. You can use it to remove stuff from an array. It takes a start argument and a number argument, for example like below (removing the two first elements)

let myList = [0,1,2,3,4,5,6,7,8,9]
myList.splice(0, 2)

But you can also feed it any number of elements after the number argument which will be inserted where you removed the elements. Splice can be very useful, but be careful, because everything is just weird enough that it is very easy to do something you didn’t want to and cause some difficult to spot bugs.

Let me end with the key differences between slice and splice:

• Splice mutates
• Slice doesn’t mutate
• Slice works with start and end position
• Splice works with a start position and a “delete Count”.
• Splice can also append elements.

Arif Khoja

Arif Khoja is a Developer. He is a Javascript Enthusiatic who loves logical programming and has first hand experience in building a cutting edge internet product using Angular. He is also an open source freak and keen about learning and sharing. He writes Javascript both frontend and backend. He loves learning and sharing tech all the time. He also has a hands on experience in SEO and writes articles about latest emerging technologies.