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():
- Takes two optional parameters
start indexandend index. - 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():
- Takes two optional parameters
start indexandlength of elements to be deleted. - 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
Top comments (4)
In
splice()usecase 2fruitsshould be['apple', 'mango', 'grape', 'banana', 'orange']after splicing, shouldn't it?You are right. Silly mistake, didn't maintain the first item 'apple' there.
Thanks for correction.
My pleasure! ☺
Thanks for the nice article. It provides a good overview.
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().