Slice and splice: explained

While .slice() and .splice() are incredibly useful, the similarity of their names can cause a lot of confusion for beginner and seasoned developers alike. This post will explain the difference and, hopefully, give you the confidence to use them in your code!

Slice

Slice is the easier of the two to explain, since it only does one thing, so I'll start there.

Array.slice(startIndex, endIndex) will return a copy of the array from startIndex up until (not including) the endIndex you've provided without changing the original array. If you don't provide an endIndex, it will go until the end of the array.

const week = [
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
  "Sunday",
];
const weekend = numbers.slice(5); // Will return ["Saturday", "Sunday"]
const weekdays = numbers.slice(0, 5); // Will return ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]

Splice

There are three things you can do with splice:

1. Remove part of the array
2. Replace part of the array with a new value
3. Insert something new anywhere within the array

The syntax for splice is: Array.splice(startIndex, deleteCount, replacingItems). I'll show you what they mean based on the three things you can do with splice. The only required parameter is startIndex.

Splice has a major gotcha that you need to be aware of: splice changes the original array.

Removing part of the array

Let’s say you are running a race and there are 6 finishers. To figure out who to give a trophy, you want to eliminate everyone except the top three. Everyone outside of the top three will get a medal.

// Top three trophies
const finishers = [1, 2, 3, 4, 5, 6];
finishers.splice(3);
console.log(finishers); // [1, 2, 3]

// Medals outside of top three
const finishers = [1, 2, 3, 4, 5, 6];
finishers.splice(0, 4);
console.log(finishers); // [4, 5, 6]

The above example can be done in a single go because Array.splice() returns the deleted portion of the array. This is what that would look like:

const finishers = [1, 2, 3, 4, 5, 6];
const medals = finishers.splice(3);

console.log(finishers); // [1, 2, 3]
console.log(medals); // [4, 5, 6]

Replacing part of the array with a new value

Let’s say you want to fix the following array:

const months = ["January", "September", "March", "April"];

Obviously, "September" is wrong and you want to replace it with "February". Here’s what that would look like:

// Array.splice(startIndex, deleteCount, replacingItems)
const months = ["January", "September", "March", "April"];
months.splice(1, 1, "February");

console.log(months);
// ['January', 'February', 'March', 'April']

Inserting something new anywhere within the array

Using the same example as above, let’s say you forgot to add a month in your array:

const months = ["January", "March", "April"];

If you want to add ”February" to the array, you can use the exact same code as replacing part of the array but this time you set the deleteCount to 0:

// Array.splice(startIndex, deleteCount, replacingItems)
const months = ["January", "March", "April"];
months.splice(1, 0, "February");

console.log(months);
// ['January', 'February', 'March', 'April']

Wrapping things up

While slice and splice have incredibly similar names and return values, they are used entirely different and have different use cases. I hope this post has been helpful to you.

Hit me up if you find anything unclear or confusing. I’d be happy to explain it to you in more detail and will update this post accordingly!