DEV Community

Cover image for Javascript: The Difference Between .slice and .splice
Anthony DiPietrantonio
Anthony DiPietrantonio

Posted on

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..

https://media.giphy.com/media/iVqXV4vE4DDYk/giphy.gif

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) //  ["๐Ÿงก","๐Ÿ’›","๐Ÿ’š","๐Ÿ’™","๐Ÿ’œ","๐Ÿ–ค"]
Enter fullscreen mode Exit fullscreen mode

Using a starting and an ending index:

let colors = ["๐Ÿงก","๐Ÿ’›","๐Ÿ’š","๐Ÿ’™","๐Ÿ’œ","๐Ÿ–ค"]

console.log(colors.slice(1,5)) // ["๐Ÿ’›", "๐Ÿ’š", "๐Ÿ’™", "๐Ÿ’œ"]
console.log(colors.slice(2,4)) // ["๐Ÿ’š", "๐Ÿ’™"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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) // ["๐Ÿงก"]
Enter fullscreen mode Exit fullscreen mode

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) // ["๐Ÿงก", "๐Ÿ’š", "๐Ÿ–ค"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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 ๐Ÿ‘‹.

Top comments (0)