The slice[ ] method copies a given part of an array and returns that copied part as a new array. It doesn’t change the original array.
The splice[ ] method changes an array, by adding or removing elements from it.
Here is the slice syntax:
array.slice[from, until];
// example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.slice[1, 3]
console.log[{array, newArray}]
// output: array: [1, 2, 3, 4, 5, 6], newArray: [2, 3]
Note: the Slice[ ] method can also be used for strings.
And here is the splice syntax:
//For removing elements, we need to give the index parameter,
// and the number of elements to be removed
array.splice[index, number of elements to be removed];
//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice[1, 3]
console.log[{array, newArray}]
// output: array: [1, 5, 6], newArray: [2, 3, 4]
Note: If we don’t define the second parameter, every element starting from the given index will be removed from the array
// For adding elements, we need to give them as the 3rd, 4th, ... parameter
array.splice[index, number of elements to be removed, element, element];
//example
let array = [1, 2, 3, 4, 5, 6]
let newArray = array.splice[1, 3, 'a', 'b']
console.log[{array, newArray}]
// output: array: [1, ,'a', 'b', 5, 6], newArray: [2, 3, 4]
Related links:
Let’s clear up the confusion around the slice[ ], splice[ ], & split[ ] methods in JavaScript
Array.prototype.slice[]
Array.prototype.splice[]
Javascript arrays are variables that can hold more than one value. There are many methods associated with these arrays. The methods slice[] and splice[] are widely used methods for array manipulations. There are various differences between them which are listed in the table below.
This method is used to get a new array by selecting a sub-array of a given array. | This method is used to add/remove an item from the given array. |
The parameter ‘s’ indicates the starting index and ‘e’ indicates the ending index. They denote the index of the sub-array to be taken. By default, the value for start is ‘0’ and end is ‘n’. | The parameter ‘i’ denotes the starting index, ‘n’ denotes the number of items to be removed from the specified starting index.‘item 1, item 2, …..item n’ represents the list of new items to be added at the given index. If n=0, no item is removed, the new items are just added to the specified starting index. |
The changes do not reflect in the original array. | The changes reflect in the original array |
The result has to be assigned to a new array variable. | The result need not be assigned to any other new variable. |
The return value is new array with the values in the selected sub-array of the given array. The values in the range start to [end-1] will be selected. | The return value is an array containing the deleted element. |
Takes exactly 2 arguments | Takes ‘n’ number of arguments [a list of new items can be supplied] |
Syntax:
- slice[]:
array_name.slice[s, e]
- splice[]:
array_name.splice[i, n, item 1, item 2, .....item n]
Examples for slice[] method
Example 1: Both the start and end are specified.
var
cars=[
'Benz'
,
'Innova'
,
'Breeza'
,
'Etios'
,
'Dzire'
];
var
new_cars=cars.slice[1, 4];
document.write[
"cars :"
, cars,
"
"];
document.write[
"new_cars :"
, new_cars];
Output:
cars :Benz, Innova, Breeza, Etios, Dzire new_cars :Innova, Breeza, Etios
Example 2: only the start is specified. The end is by default the length of the array.
var
cars=[
'Benz'
,
'Innova'
,
'Breeza'
,
'Etios'
,
'Dzire'
];
var
new_cars=cars.slice[2];
document.write[
"cars :"
, cars,
"
"];
document.write[
"new_cars :"
, new_cars];
Output:
cars :Benz, Innova, Breeza, Etios, Dzire new_cars :Breeza, Etios, Dzire
Examples for splice[] method
Example 1: Now let us just add some more items but not remove any item.
var
cars=[
'Benz'
,
'Innova'
,
'Breeza'
,
'Etios'
,
'Dzire'
];
cars.splice[2, 0,
'ambassedor'
,
'BMW'
,
'Audi'
];
document.write[
"cars :"
, cars,
"
"];
Output:
cars :Benz, Innova, ambassedor, BMW, Audi, Breeza, Etios, Dzire
Example 2: Removing one element and not adding any new item
var
cars=[
'Benz'
,
'Innova'
,
'ambassedor'
,
'BMW'
,
'Audi'
,
'Breeza'
,
'Etios'
,
'Dzire'
];
cars.splice[2, 1];
document.write[
"cars :"
, cars,
"
"];
Output:
cars :Benz, Innova, BMW, Audi, Breeza, Etios, Dzire
Example 3: Removing more than one element and not adding any new item.
var
cars=[
'Benz'
,
'Innova'
,
'ambassedor'
,
'BMW'
,
'Audi'
,
'Breeza'
,
'Etios'
,
'Dzire'
];
cars.splice[2, 3];
document.write[
"cars :"
, cars,
"
"];
Output:
cars :Benz, Innova, Breeza, Etios, Dzire
While removing more than one element, in the above case, the starting index specified is ‘2’ and ‘3-elements’ are required to be removed, so it starts removing elements from the index itself. Thus the items in index 2, 3 and 4 are removed.