Introduction
As we know, arrays in Javascript are variables that are capable of holding multiple values. We have multiple methods to work on arrays. Out of which slice and splice are mostly used and sometimes people get confused between the two. So, in this blog, we will be understanding both the methods and what is the difference between them. So, let’s get started.
Prerequisites
Basic knowledge of Javascript.
Slice
The slice() method is used to return a new array containing a portion of that array. It does not modify the original array rather returns a new array. Here is the syntax of the method:
slice()
slice(start)
slice(start, end)Let’s see these parameters.
- start: Here start is the index number from where you want to extract the array and it is optional.
If the start is undefined then it starts extracting from zero.
And if the start is greater than the index range, it returns an empty array.
A negative index can also be used for it. For eg slice(-2) returns the last two elements.
- end: end is the index at which we want to stop the extraction. It is also optional. It is not included in the extraction.
This index is not included in the extraction.
If the end is undefined then it extracts the whole array from the starting index number.
If the end is greater than the index range then it extracts it till the arr.length.
Let us see examples of all these cases to have a better understanding.
Examples of slice
Case 1: we are passing both the parameters start and end and the returned array includes indexes 1, 2, and 3.
Case 2: we are passing only one parameter, omitting the end. So all elements will be returned starting from the mentioned index(In this case, index 2)
Case 3: when the start is greater than the index range, it returns an empty array.
Case 4: when passing negative index. In this case, returns the last 3 elements.
Case 5: when the end is greater than the index range then it extracts it till the arr.length
Case 6: Here it returns the third element from the second to last element.
For objects, the slice always copies object references into a new array. The new array and the original array will refer to the object. So in case, the object changes you will be able to see the changes on both the original array and the new array.
Splice
The splice() method is used to remove or replace existing elements in the array. This method modifies the original array and returns the removed elements as a new array. Here is the syntax for it:
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2, itemN)Let us understand these parameters now.
- start: start is the index from where you want to modify the array.
If the value of start is greater than the length of the array then it is set to the length of the array. In such a case it will behave as an adding function.
If the value is negative then it will start from that many positions from the end.
- deleteCount: This is an optional parameter and refers to the number of elements to remove.
If it is 0 or negative no element will be deleted.
- Item1, item2, ..: This is an optional parameter. These are the elements that will be added from the start index. If you are not mentioning it then it will just delete the elements.
Let us see examples of these cases.
Examples of splice
Case 1: passing only start. Here passing index as 2 returns the array from that index to the length of the array.
Case 2: Here passing start and delete count. Starts from index 1 and deletes 2 items from the array.
Case 3: Here passing start, deleteCount, and the item as well. So, in this case, it starts from index 2 and deletes 1 value, and inserts ‘Kiwi’ there.
Case 4: Similar to the above example just removing 2 items now.
Case 5: Here we are passing the starting position as out of index range. So it works as an adding function in this case.
Case 6: Here it starts from the second last position and replaces that with ‘Guava’.
Take Aways
So now when we have seen all the cases we know the difference between the two methods. Slice is used to get a new array from the original array whereas the splice is used to add/remove items in the original array. The changes are not reflected in the original array in the case of slice and in the splice, the changes are reflected in the original array. Also, the slice method will take almost 2 elements and the splice can take n number of arguments. To know more about these methods please refer to the MDN docs here.
Also, Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Also, you can comment and tell me how I can improve my content. Feel free to share your thoughts about this blog in the comments.
