Javascript: The Difference Between .slice and .splice

When I first started learning Javascript, one of the first things that I would constantly trip up on was when and how to use .slice and .splice. I figured that writing a blog about the difference between the two may be useful to others who may end up in the same boat one day. Get in..

Slice

This method will return a new array, with its values being a piece (slice) of the original array. Use this method if you want to maintain the original array. The slice method has the ability to take in two parameters which will determine which slice/piece of the array it will return (both zero-based, meaning that the first element in the array will be 0):

1. starting index (optional)
2. ending index (optional)

Note: when using a starting index AND ending index, the value at the ending index will not be included. When ONLY using a starting index, it will include all values from (and including) the starting index, to the end of the array. This will make more sense in the examples below 👇

Only using a starting index:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

console.log(colors.slice(1)) // ["💛", "💚", "💙", "💜", "🖤"]
console.log(colors.slice(4)) // ["💜", "🖤"]
console.log(colors.slice(14)) // []
console.log(colors.slice()) // ["🧡","💛","💚","💙","💜","🖤"]

// Note: using a negative value (x) here will return the last x values of the array
// It will include all values even if x is greater than length of the array 
console.log(colors.slice(-4)) // ["💚", "💙", "💜", "🖤"]
console.log(colors.slice(-2)) // ["💜", "🖤"]
console.log(colors.slice(-14)) // ["🧡","💛","💚","💙","💜","🖤"]

// Rembmer, this will not modify/change the original array.. so:
console.log(colors) //  ["🧡","💛","💚","💙","💜","🖤"]

Using a starting and an ending index:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

console.log(colors.slice(1,5)) // ["💛", "💚", "💙", "💜"]
console.log(colors.slice(2,4)) // ["💚", "💙"]

Just like when we are only using a starting index, we also have the ability to use negative values as our ending index. When we use a negative value as our ending index, we are essentially saying "take a slice of the original array starting at [starting index] and include all values of the array except the last [x] values" — x being our negative ending index value.

If the ending index value is greater than the remaining length of the array from the starting index, the return value will be an empty array.

The code snippets below should give you an idea of how this works 👇

Using a starting index and a (negative) ending index:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// "Take a slice of the original array starting at 2 and include all values EXCEPT...:

// ".. the last (-1) value"
console.log(colors.slice(2,-1)) // ["💚", "💙", "💜"]

// ".. last two (-2) values"
console.log(colors.slice(2,-2)) // ["💚", "💙"]

// ".. the last three (-3) values"
console.log(colors.slice(2,-3)) // ["💚"]

// ".. the last four (-4) values"
console.log(colors.slice(2,-4)) // []

// Since our starting index is 2, we are left with 3 additional values
// After we surpass that value of (negative) 3, we will start to receive an empty array

Splice

This method will modify / change the array it is called upon by removing and/or replacing existing values, OR adding new elements — IT WILL NOT CREATE A NEW ARRAY LIKE .slice DOES. The .splice method itself will return an array of the removed item(s), or an empty array if no items are replaced/removed. We are able to pass the following parameters to .splice:

1. starting index
2. number of items to delete (optional)
3. item1 to be added from starting index (optional)
4. item2 to be added after item 1 (optional)

and so on.. (optional)

Only using starting index:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Will remove all colors that include / come after the starting index
console.log(colors.splice(1)) // ["💛", "💚", "💙", "💜", "🖤"]

// Colors will now only include the orange heart since it was before the starting index of 1
console.log(colors) // ["🧡"]

Using a starting index with delete count:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Starting from index 1, remove 1 item
console.log(colors.splice(1,1)) // ["💛"]
console.log(colors) // ["🧡", "💚", "💙", "💜", "🖤"]

// Starting from index 2, remove 2 items
console.log(colors.splice(2,2) // ["💙", "💜"]
console.log(colors) // ["🧡", "💚", "🖤"]

Using a starting index, delete count, and items to add/replace starting from starting index:

let colors = ["🧡","💛","💚","💙","💜","🖤"]

// Starting from index 0, delete 0 items, and add "hi" starting from index 0
console.log(colors.splice(0,0,"hi") // []
console.log(colors) // ["hi","🧡","💛","💚","💙","💜","🖤"]

// Starting from index 6, delete 1 item, and add "bye" starting from index 6
console.log(colors.splice(6,1,"bye")) // ["🖤"]
console.log(colors) // ["hi","🧡","💛","💚","💙","💜","bye"]

// Starting from index 2, delete 3 items, & add "bing","bang","boom" starting from index 3
console.log(colors.splice(2,3,"bing","bang","boom")) // ["💛", "💚", "💙"]
console.log(colors) // ["hi","🧡","bing","bang","boom","💜","bye"]

TLDR

• Use .slice when you want don't want to modify the original array, and just use a piece (slice) of it somewhere
• Use .splice when you want to modify the original array

As always, refer to MDN for more info:
.slice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
.splice: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello 👋.