DEV Community

Cover image for Slice() & Splice() in JavaScript
Rohit Kumawat
Rohit Kumawat

Posted on • Edited on

Slice() & Splice() in JavaScript

#javascript #webdev #beginners #codenewbie

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

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

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

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'} ]
Enter fullscreen mode Exit fullscreen mode
  • 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.
Enter fullscreen mode Exit fullscreen mode
  • 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.
Enter fullscreen mode Exit fullscreen mode
  • 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'} ];
Enter fullscreen mode Exit fullscreen mode

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

Top comments (4)

Collapse
 
dennishartrampf profile image
Dennis Hartrampf •

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

Collapse
 
ip127001 profile image
Rohit Kumawat • • Edited

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

Collapse
 
dennishartrampf profile image
Dennis Hartrampf •

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

Collapse
 
ip127001 profile image
Rohit Kumawat • • Edited

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