Array.prototype.slice() vs Array.prototype.splice()

#javascript #beginners #tutorial #webdev

Introduction of JavaScript Array Slice Vs Array Splice:

In this article, we will briefly discuss array slice method and array splice methods in Javascript.

What is array?

An array is used to store a collection of data with similar data types.
(or)
In simple terms it can be defined as a group of elements having the same data type.

What is Array Slice in javascript?

An array slice is a method of slicing the given array to obtain part of the array as a new array.
In Javascript, there is a method known as the slice() method for selecting part of the given elements and return as a new array without changing the original array.

Syntax:

Parameters:

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:

In this section, we will see how the slice() method works on array in javascript.
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.

Input:
Output: [ 'Rahul', 'Carolyn' ]

Example 2
what if i don't give the end parameter?
let's see below;

Input:
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.

Example 3
What if we pass some negative value to that function?
lets see below;

Input:
Output: [ 'Mike', 'Raj' ]

Its because the whole index of arrays will become reverse and will start from -1 as shown in below picture;

Conclusion:

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.

Now we will learn about Array.splice() Method in Javascript:

What is Array Splice in javascript?

Splice array in Javascript is a method that adds and removes items or data to or from the array. it's a method which changes the content by adding the new elements or removing the old once from an array.