Array.prototype.slice() vs Array.prototype.splice()
Tags: javascript, beginners, tutorial, webdev
Published: 2021-10-18 14:10:02

## 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:

![arr.slice(start, end)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3f85du8iy5x2xk4ki5v.JPG)

### 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**
![slice method picture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67bm5rwdwx5g50b9p4am.jpg)

### 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;
![index values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk2jkvzlasro3ap3xxvt.JPG)

**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:**
![image for above](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cvzibagvtcmcqel3bap.JPG) **Output:**  [ 'Rahul', 'Carolyn' ] 


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

**Input:**
![passing diff parameter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fzjnucwjlx8pyqa1e4x.JPG) **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:**
![passing diff para](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1xco6plwo0oui0gg77n.JPG) **Output:** [ 'Mike', 'Raj' ]

Its because the whole index of arrays will become **reverse** and will start from -1 as shown in below picture;
![Picture to explain indetail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcvnm4y39wpbzzar5xuq.jpg)

### 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.

### Syntax:
![syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os1376eijabi62ie2l39.JPG)
 
### Parameters:

- **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".

 **Example 1**
Add "Carolyn" and "mike" after "Rahul" and before joe?

**Input**
![input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m1iusldijx2k6c9q66g.JPG)
**Output:**
[ 'joe', 'Rahul', 'Carolyn', 'Mike', 'Raj' ]

**Example 2**
remove "Raj" and add "Carolyn" and "mike"?
**Input:**
![Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgeylzkkr4ewcsxubd8d.JPG)
**Output:**
[ 'joe', 'Rahul', 'Carolyn', 'Mike' ]

**Example 3**
Pass the negative value  to add  two values and also delete "Rahul"?
**Input:**
![Input](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63aa0p6iw5rxw3zki7xs.JPG)
**Output:**
[ 'joe', 'Carolyn', 'Mike', 'Raj' ]

### Conclusion:
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:
 **Slice**
- Does not Changes the content of original array
- Returns new copy array
- Non-destructive function

**Splice**
- Changes the content
- mutates
- No new array
- Destructive function

### Reference and  Recommended video for more detailed information: 
 **Reference:**
- [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 
- [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice)

**Most recommended video of Steve's**
[![Steve video](http://img.youtube.com/vi/u1ZCQfXQprE/0.jpg)](http://www.youtube.com/watch?v=u1ZCQfXQprE)