In JavaScript, it is easy to confuse slice and splice. I certainly do it all the time. They have similar names but act in very different ways. Here’s a quick guide to keep them straight.

tl;dr

  • slice() returns up to but not including the second argument; splice() does return the second argument
  • slice() returns a new array object; splice() mutates the original array object
  • slice() can take up to 2 arguments; splice() can take n arguments

Difference #1: Returns

The most noticeable difference is that the slice() method returns up to but not including the second argument, whereas splice() returns up to the second argument.

['a', 'b', 'c', 'd', 'e'].slice(1,3)
// ["b", "c"]
['a', 'b', 'c', 'd', 'e'].splice(1,3)
// ["b", "c", "d"]

Difference #2: Mutability

Under-the-hood something much more fundamental is going on with the method returns. slice() creates a brand new array object which it then returns; by contrast, splice() mutates the original array object and returns it.

const arr = ['a', 'b', 'c', 'd', 'e']
arr.slice(1,3)
// ["b", "c"]
arr
// ['a', 'b', 'c', 'd', 'e']

const arr2 = ['a', 'b', 'c', 'd', 'e']
arr2.splice(1,3)
// ["b", "c", "d"]
arr2
// ["a", "e"]

slice() is known as an accessor method which does not modify the array but instead returns a representation via a new Array object.

splice() is known as a mutator method because it does mutate the original array.

For completeness, there are also Iteration Methods like forEach() and findIndex() that take functions as arguments and can be used to process the array.

Difference #3: Number of arguments

slice() can take either 1 argument, which acts as the begin or 2 arguments which represent begin and end.

// array.slice(begin)
// array.slice(begin, end)

['a', 'b', 'c', 'd', 'e'].slice(1)
// ["b", "c", "d", "e"]
['a', 'b', 'c', 'd', 'e'].slice(1,3)
// ["b", "c"]

For splice(), 1 argument acts as the start and a 2nd argument is formally the deleteCount, the number of the old array element to be removed.

// array.splice(start)
// array.splice(start, deleteCount)

['a', 'b', 'c', 'd', 'e'].splice(1)
// ["b", "c", "d", "e"]
['a', 'b', 'c', 'd', 'e'].splice(1,3)
// ["b", "c", "d"]

But splice() can ultimately take n arguments, as each successive argument after the 2nd is treated as as an item to add to the array beginning at the start index (ie argument 1).

const arr = ['a', 'b', 'c', 'd', 'e']
arr.splice(0, 1, 'dog')
// ["a"]
arr
// ["dog", "b", "c", "d", "e"]

Further Reading

As usual, MDN is the canonical source for a more in-depth discussion of slice() and splice().

Other than the differences listed above, the two methods are the same and you can use them interchangeably as you feel fit :)