Discussion on: What Javascript features are the most confusing to you?

[Pini Cheyni]

Splice & Slice, I think the names are even confusing.

[Mike Ekkel]

These gave me such a headache when I started out and they sometimes still do. It warrants its own post, but I'll write it down for you anyway!

Aside from their names being incredibly similar they also appear to do the exact same thing, albeit in different ways, from a distance. This is because the returned value is, more or less, the same: the portion of the array you run the method for. This is also where the similarities stop.

Slice

Slice is the easier of the two to explain, so I'll start there.

Array.slice(startIndex, endIndex) will return a copy of the array from the starting index up until (not including) the ending index 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 numbers = [0, 1, 2, 3, 4, 5]
const slicedNumbersNoEnd = numbers.slice(2) // Will return [2, 3, 4, 5]
const slicedNumbers = numbers.slice(2, 4) // Will return [2, 3]

Splice

Splice has a two gotchas that you need to be aware of. The first one being that splice changes the original array. The second one is the fact that 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, itemAmount, replacingItems). I'll show you what they mean based on the three things you can do with splice. The only required parameter is startIndex.

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:

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 sort of 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 setup as the example above except we don’t delete any elements:

const months = ['January', 'March', 'April']
months.splice(1, 0, "February")

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