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)
You are right. Silly mistake, didn't maintain the first item 'apple' there.
Thanks for correction.
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().