Splice Vs Slice — JavaScript
Splice():
The Splice() method when called upon an array can add elements to an existing array at a given position ( by replacing the existing elements and deleting them which is optional ). The splice() method returns an array of all the deleted elements. Suppose no elements are deleted, the splice method returns an empty array.
Argument 1: “1"
In the above example, we call the splice() method on the “cars” array. The first argument denotes the index starting at which I need to perform my modifications. The rules of modifications are then conveyed by the subsequent arguments inside the splice function.
Argument 2: “0"
Here I pass 0 as my second argument, conveying that I don’t want to delete any existing elements in place of my additions. This argument also determines my return array. Since I am deleting nothing, splice() method will return an empty array [].
Argument 3 and 4: ‘Alfa Romeo’ , ‘BMW’
Splice() modifies the existing array in place. So as I have passed two more additional car types, that gets added starting from index 1, which was passed as the first argument. The element that was already at the index position will be shifted right to that many places of additions.
What if’s?
“What if you want to only delete the elements and not add anything to the existing array?”
=> Don’t pass any arguments after the second argument.
Here, you can see that the first two arguments implies that I want to remove two elements(Second Argument) starting from index 2 (First argument) and not add anything in place of them as no arguments have been passed after the first two arguments.
What if the start index of the splice function is greater than or equal to the length of the array?
=> No element gets deleted even if the second argument is passed. And any additions will automatically get added to the end of the array. And since there are no deletions this returns an empty array [].
From the above snippet, we passed the value of the first argument = 10, which is obviously greater than the true length of the original array. JS ignores this false index and adds elements to the end of the array, since such an index doesn’t exist in the original index, nothing gets deleted from the array starting form that index.
What if the index is a negative number?
Get Suraj Kumar’s stories in your inbox
Join Medium for free to get updates from this writer.
=> The position is counted from the end, but this time the absolute index value is 1 and not 0. So –1 implies the first element from the last and so on.
But the order of deletion remains the same, it’s from left to right.
Slice():
The slice function is used to cave out elements from an existing array without modifying it. Slice method takes in two arguments to specify the start index (Inclusive) and the end index(Non inclusive).
Argument 1: “2"
The first argument passed specifies the index from which the slice function must start gathering elements to return.
Argument 1: “5"
The second argument passed specifies the index up to which the elements must be gathered. However, please note that this index is non inclusive. So applying this, we say that slice function starts gathering elements from index 2 (Ferrari) to index 4 (Jeep).
Negative indices:
Negative indices indicate that we must consider the starting index from the end of the array. During a negative index, we assume one-based indexing.
What if’s?
What if both my arguments are negative number?
=> In this case, we must consider the start index from the end and also the end index from the end. During this scenario again the end index is non–inclusive.
From the above snippet, we see that the start index is –4. So the element from the end sitting on –4 is ‘Ferrari’, and the end index is –1. Since it is not inclusive, we take ‘Jeep’ to be the last element that will be retrieved into the array.
What if you want a particular set of elements from the last?
=> To achieve this, we can use the length function of the array and subtract the no . of elements that we want to get from last.
From the above snippet, I wanted the last four elements from the array. So I subtracted 4 from the total no. Of elements present in the array, which evaluated to 2. And since I have not given any end index, the slice function will return all elements starting from index 2 to the end, which will get me the last four elements.
