Slice() & Splice() in JavaScript

There is often a confusion between slice() and splice() JavaScript array methods. It is a commonly asked question in Javascript interview for freshers.

Let's discuss how they work with examples and what's the core difference between them.

Slice():

1. Takes two optional parameters start index and end index.
2. Doesn't change the original array instead returns the copied part of array from {start index} to {end index - 1} in a new array, like the example below.

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.slice(1,3); 
['mango', 'banana'] 
// it returns the elements in index 1(start index) and 2(end index - 1)

fruits: ['apple', 'mango', 'banana', 'orange'] 
// no change in original arary

But it only does shallow copying.[Example below]

let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.slice(1,3);

// output: [  {id: 2, name: 'react'}, {id: 3, name: 'angular'}]


newArray[0].name = 'jquery';

console.log('new array id: 2 value', newArray[0].name); //jquery
console.log('old array id: 2 value', oldArray[1].name); // jquery

if you change the object value (reference type) in newArray it affects the value in oldArray i.e. Shallow copying.

Great Usecase: if you want a shallow copy of an array: you can use slice() method with no parameters and it will return the new copied array.

let originalArr = [1, 2, 3, 4];

let copiedArr = originalArr.slice(); // new copied [1, 2, 3, 4]

Splice():

1. Takes two optional parameters start index and length of elements to be deleted.
2. returns part of array from {start index} to the {start index + length of elements to be deleted} in a new array.
   • But It changes the original array i.e. remove the elements from original array. [Example below]

let oldArray = [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}, 
  {id: 3, name: 'angular'}, 
  {id: 4, name: 'vue'}
];

let newArray = oldArray.splice(0, 2);

// newArray: [
  {id: 1, name: 'js'}, 
  {id: 2, name: 'react'}
] 

// oldArray: [
   {id: 3, name: 'angular'}, 
   {id: 4, name: 'vue'}
]

• Usecase 1: It can also be used to replace items in the original array.
  • splice() can take three parameters start index, length of items to be deleted and items to be replaced.[Example below]

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(0, 1, 'grape'); // ['apple']

// original array: 
['grape', 'mango', 'banana', 'orange'];

// grape has replaced the apple in the original array.

• Usecase 2: You can add an item in particular index.[Example below]

let fruits = ['apple', 'mango', 'banana', 'orange'];

fruits.splice(2, 0, 'grape'); // []

// original array: 
['apple', 'mango', 'grape', 'banana', 'orange'];

// grape has been added to the index = 2 in the original array.

• Usecase I came across several times: deleting an element by finding an index.

let fruits = [
  {id: 1, value: 'apple'}, 
  {id: 2, value: 'mango'},
  {id: 3, value: 'orange'}
];

let index = fruits.findIndex(el => el.id === 2) // 1

fruits.splice(index, 1); // [{id: 2, value: 'mango'}]

// original array: 
let fruits = [
  {id: 1, value: 'apple'},
  {id: 3, value: 'orange'}
];

Conclusion:

Both these methods can be used for deleting elements in an array.
The core differences are below in table.

slice	splice
return the copied version of deleted elements in new array	return the deleted elements in new array
doesn't change the original array	changes the original array, deleted elements are removed from the original array
no parameters, it will return the shallow copy of original array	no parameters, it will return empty array

Read more on MDN: splice, slice

Thanks for reading!
Let's connect on twitter My Profile

Comments

[Dennis Hartrampf]

In splice() usecase 2 fruits should be ['apple', 'mango', 'grape', 'banana', 'orange'] after splicing, shouldn't it?

[Rohit Kumawat]

You are right. Silly mistake, didn't maintain the first item 'apple' there.
Thanks for correction.

[Dennis Hartrampf]

My pleasure! ☺
Thanks for the nice article. It provides a good overview.

[Rohit Kumawat]

Thanks for the reading and a cool suggestion :)
In the next one I will be covering array methods, chaining and some usecases. However, this article I solely dedicated to slice() and splice().