.slice() vs .splice()

Everyone has that one thing that they need to look up ever single time. For JavaScript mine happens to be when to use slice and when to use splice on an array. Writing this post should end that once and for all (maybe).

The confusion stems from the fact that they do something very similar but at the same time in very contrasting ways so they have different use cases. They are both used to grab sections of an array. I'm going to break down how to use both and give my thoughts as to when one would be appropriate over the other.

.slice()

So slice is used to grab a section of an array and it returns a new COPY of that section while leaving the original array intact. The method can take in either one or two parameters.

• The first parameter being the index of the array at which you want to start. The starting index will be included in the new copied array.
• The second parameter is the index that you would like to stop at. It is not inclusive though so this index will not be included in the copy.
• If you don't use the second parameter and designate an end index the copied array will start at the first parameter and carry on all the way to the end of the array.

Example:

const planets = ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth'];

// This will return indexes 1-4

const middleFourPlanets = planets.slice(1,5); 
console.log(middleFourPlanets);
//expected output: ['Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo']

// This will return everything from index 3 on

const lastThreePlanets = planets.slice(3);
console.log(lastThreePlanets);
//expected output: ['Kashyyyk', 'Naboo', 'Hoth']

//The original array is still intact with all of its indexes;

console.log(planets);
//expected output: ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth']

So the use case for .slice() is when you need to grab parts of an array but still need the original array in its entirety.

.splice()

The splice method is also used for grabbing a section of an array, the key difference being that it does it destructively. Beyond the fact that it can pull out parts of an array it can also add/replace sections to an array. It takes in three different types of parameters.

• The first parameter is the index you would like to start the splice at. This index is included.
• The second is different than slice. It is not the index you want sliced up to, but instead how many items you want spliced out of the array. If this isn't declared then it will cut off the array from the first parameter indicated. Something worth noting here is if you're just trying to insert into the array you can specify 0 and it won't remove any items.
• The third parameter type are items you would like to be inserted in place of what was removed or just at the position specified. Everything from the third parameter on will be inserted.

Since this is destructive it will alter the original array so keep that in mind before using it.

Example:

const planets = ['Tatooine', 'Alderaan', 'Coruscant', 'Kashyyyk', 'Naboo', 'Hoth'];

//This will start at index 2, remove 0 items, but insert two more strings at that position.

planets.splice(2, 0, 'Mustafar', 'Bespin');
console.log(planets);
// expected output: ['Tatooine', 'Alderaan', 'Coruscant', 'Mustafar', 'Bespin', 'Kashyyyk', 'Naboo', 'Hoth']

//This will start at index 0 and remove 1 item. 

planets.splice(0,1);
console.log(planets)
// expected output:  ['Alderaan', 'Coruscant', 'Mustafar', 'Bespin', 'Kashyyyk', 'Naboo', 'Hoth']


//This will remove all items after the indicated position

planets.splice(3);
console.log(planets);
// expected output: ['Alderaan', 'Coruscant', 'Mustafar']

So this is effective for adding items to an array at a specific position. It is also useful to remove segments of an array that maybe aren't relevant.

This shouldn't be used if you will need the original array at any point later.

Wrap Up

I'm feeling a little bit better on the two and think moving forward I'll know which one to use and when to use it.

While this post was largely for me to solidify the difference on the two I hope if you read this you gained something from it too. As always.. Happy Coding!