Introduction :
Array splice() and slice() methods look similar, but both are different and used for different use cases. These methods are most commonly used array methods. In this tutorial, we will learn both of these methods with different examples for each.
splice() method :
splice() can modify the array elements or we can say that it is a mutator method. The syntax of the splice() method is as below :
array.splice(startIndex, [deleteCount], [items])
Here, startIndex : It is the start index of the array from where splice() will start deleting the items. deleteCount(Optional value) : It is the number of elements to delete starting from index startIndex. items(Optional value) : One or multiple elements to add to the array. If we don’t specify any, splice will only remove elements.
Example with only startIndex :
startIndex is the only required argument for splice(). With only startIndex, it will remove elements from the array. Let’s take a look at the below example :
var days = [0,1,2,3,4,5,6,7,8,9]
// example 1
console.log(days.splice(0))
console.log(days)
console.log("**********")
// example 2
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(5))
console.log(days)
console.log("**********")
// example 3
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(23))
console.log(days)
console.log("**********")
// example 4
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(-3))
console.log(days)
console.log("**********")
// example 5
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(-12))
console.log(days)
console.log("**********")
// example 6
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(NaN))
console.log(days)
console.log("**********")
It will print the below output :
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[]
**********
[ 5, 6, 7, 8, 9 ]
[ 0, 1, 2, 3, 4 ]
**********
[]
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
**********
[ 7, 8, 9 ]
[ 0, 1, 2, 3, 4, 5, 6 ]
**********
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[]
**********
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
[]
**********
Explanation :
[table] startIndex, explanation 0, starts from beginning of the array 0<startIndex<length, starts from its value startIndex>length, starts from beginning of the array startIndex<0, starts from length - startIndex startIndex<0 and it is > length, starts from beginning of the array startIndex = NaN, starts from beginning of the array [/table]
Example 1 :
For the first example, startIndex is 0. So, it returned all items starting from index 0 and removed all items from the original array.
Example 2 :
The value of startIndex is 5. The items are removed from index 5 and returned.
Example 3 :
The value of startIndex is 23 which is more than the size of the array. So, it begins from 0.
Example 4 :
The value of startIndex is less than 0. startIndex is from size - n, where n is 3 here.
Example 5 :
startIndex is -12. The positive value of this value is greater than the size of the array. So it starts from 0.
Example 6 :
For NaN, it starts from 0.
Using deleteCount :
This is an integer value to indicate how many elements needs to be removed. This is an optional value.
[table] value, explanation omitted or if it is greater than length of array - startIndex, all items from startIndex to the end of array will be deleted 0 or <0 , not item will be removed [/table]
Example :
var days = [0,1,2,3,4,5,6,7,8,9]
// example 1
console.log(days.splice(4,3))
console.log(days)
console.log("**********")
// example 2
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(4,10))
console.log(days)
console.log("**********")
// example 3
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(4,-1))
console.log(days)
console.log("**********")
It will print :
[ 4, 5, 6 ]
[ 0, 1, 2, 3, 7, 8, 9 ]
**********
[ 4, 5, 6, 7, 8, 9 ]
[ 0, 1, 2, 3 ]
**********
[]
[ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
**********
Explanation :
Example 1 :
Deleted 3 elements starting from index 4.
Example 2 :
10 is greater than the amount of elements left after index 4, so it deletes all elements starting from index 4.
Example 3 :
-1 is equivalent to don’t delete any element.
items :
The third optional argument is to define the elements to add to the array starting from startIndex. For example :
var days = [0,1,2,3,4,5,6,7,8,9]
// example 1
console.log(days.splice(4,3,-1,-2,-3,-4))
console.log(days)
console.log("**********")
// example 2
days = [0,1,2,3,4,5,6,7,8,9]
console.log(days.splice(4,-1,-1,-2,-3))
console.log(days)
console.log("**********")
Output :
[ 4, 5, 6 ]
[ 0, 1, 2, 3, -1, -2, -3, -4, 7, 8, 9 ]
**********
[]
[ 0, 1, 2, 3, -1, -2, -3, 4, 5, 6, 7, 8, 9 ]
**********
Here the first example says that starting from index 4, delete 3 elements and add -1, -2, -3, -4 in the array days. The second example says that starting from index 4, add -1, -2, -3, -4 without deleting any elements.
slice() method :
slice() doesn’t modify the existing array. It returns one copy of elements defined by a start index and end index. Its syntax is as below :
slice(beginIndex,endIndex)
beginIndex :
This is the start index at which the extraction begins.It is an optional value. If it is not defined, it starts from 0 and if it is greater than the length of the array, one empty array is returned. A negative index is equal to the offset from the end of the array.
endIndex :
This is an optional value that indicates the index before which the extraction ends. If it is not defined, or if it exceeds the length of the array, the extraction will be done to the end. A negative value indicates an offset from the end.
For example :