What is array?
An array is used to store a collection of data with similar data types.
In simple terms it can be defined as a group of elements having the same data type.
An array slice is a method of slicing the given array to obtain part of the array as a new array.
- start: This argument is used to define the index of an array from where the function should start selecting the elements from the array. This parameter is optional
- end: This argument is used to define the index of an array at where the function should stop extracting the elements from the array. This parameter is also optional
Picture to describe array slice method
Working of Array slice() Method with Examples:
for example: let us take a variable and pass an array of five values "joe", "Rahul", "Carolyn", "Mike" and "Raj" to it. The array values are stored in index as shown below;
Q: Now we want to slice out two values from the above array namely Rahul and Carolyn and we want to put those into a new array?
for this, we have a function named "slice(start, end)". Now we have to pass two parameters in this i.e., Starting index and end index.
As we want Rahul and Carolyn values into new array, then we will write take the index of 1 and 3(i.e., slice(1,3)).
Note: We should give the end parameter 3 instead of 2 to get Carolyn value its because we want the upto 3 values but not 3rd value.
Output: [ 'Rahul', 'Carolyn' ]
what if i don't give the end parameter?
let's see below;
Output: [ 'Rahul', 'Carolyn', 'Mike', 'Raj' ]
It means it give all the values starting from 1 to all the remaining values in to a new array.
What if we pass some negative value to that function?
lets see below;
Output: [ 'Mike', 'Raj' ]
Its because the whole index of arrays will become reverse and will start from -1 as shown in below picture;
We conclude that the array slice() method is mainly used for slicing of elements of the given array. In this article, we saw what is syntax of slice and its parameters with its working examples. The slice() method has two parameters and both are optional.
There is a situation where we have to put two new values somewhere in the middle of the same array or delete any value in the array? In order to tackle this problem we have a function called "array splice()".
Note: To put the new values in starting of the array or ending of the array, we already have functions like Push and Unshift.
- Index: Index is an integer value which addresses on what position element need to be added or from which position element is to be removed. It is required every time in splice array
- howmany: Howmany indicates how many items should be removed from the array. If it is set to zero than no element will be removed. Howmany is optional parameter value
- New value This parameter indicates new value to be added in the array. It is also an optional parameter
- Start: Index/start performs same function.
- Delete: Delete also performs similar fuction kust like howmany in the below syntax i.e., how many items to be removed from the array. It is Optional parameter value ### Working of Array slice() Method with Examples: Let us consider a variable of three array values "Joe", "Rahul" and "raj".
Add "Carolyn" and "mike" after "Rahul" and before joe?
[ 'joe', 'Rahul', 'Carolyn', 'Mike', 'Raj' ]
remove "Raj" and add "Carolyn" and "mike"?
[ 'joe', 'Rahul', 'Carolyn', 'Mike' ]
Pass the negative value to add two values and also delete "Rahul"?
[ 'joe', 'Carolyn', 'Mike', 'Raj' ]
We conclude that the array splice() changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. In this article, we saw what is syntax of splice and its parameters with its working examples. The splice() method has three parameters and two parameters are optional.
Overall Final Conclusion between Array.prototype.slice() vs Array.prototype.splice() is:
- Does not Changes the content of original array
- Returns new copy array
- Non-destructive function
- Changes the content
- No new array
- Destructive function
Reference and Recommended video for more detailed information:
Top comments (0)