The other day I asked the following question on Twitter: "What are the things you always have to google as a developer?".
This was the response from Rey van den Berg.
The difference between splice and slice 😂— Rey van den Berg (@ReyTheDev) May 28, 2020
I must admit that I've had to look up the difference between the two more than once.
These are both arrays manipulating methods, but let's see what makes the
The main difference is that the
slice method copies a part of the original array. It does not change the original one.
const array = [1, 2, 3, 'test', 5]; const sliced = array.slice(0, 4); console.log(sliced); // [1, 2, 3, "test"]
The starting and end points are two parameters we can pass to the
slice method. So in our example, we start at position 0 and
slice till position 4.
Fun fact: Slice will also work on a string!
const string = 'Hello world'; const slicedString = string.slice(0, 5); console.log(slicedString); // Hello
Ok, yes, the names are very similar. But they do something different.
The main difference for the
splice method is that it will modify the existing array.
We can remove or add elements to our initial array with
Removing elements will work like this:
const array = [1, 2, 3, 'test', 5]; array.splice(0, 4); console.log(array); // 
You see, we removed the first four elements from our array. The parameters we provided are starting and the number of elements. In this case, we start at position 0 and remove four elements.
We can also forget the second parameter. It will then remove everything after the start position we set.
const array = [1, 2, 3, 'test', 5]; array.splice(2); console.log(array); // [1, 2]
As mentioned, we can also add elements like this:
<!-- Splice Add --> const array = [1,2,3,'test',5]; array.splice(0,0,'random'); console.log(array); // ["random", 1, 2, 3, "test", 5]
We told the
splice to enter our new element
random at position 0. We can even define multiple elements here!
You can play with these two methods on this Codepen.