JavaScript

What is the Difference Between Array.slice() and Array.splice() in JavaScript?

The Array slice() method and the Array splice() method are both built-in JavaScript and are used to get a subarray out of an array. However, they are both quite different in their work. This article will differentiate them from each other by simply going over them one by one.

The Array slice() Method

The array slice() method (as mentioned above) is used to extract or make a sub-array from a parent array. This means that its return value is an array itself. To understand the Array slice() method, look at the syntax given below:

subArray = arrayVar.slice(start?: number, end?:number);

 
In this syntax:

    • subArray is the second array in which the returned array from the slice() method is stored
    • arrayVar is the main array from which the sub-array is being extracted
    • start defined the starting point (index) from where to select the elements to copy, it should be a number value
    • end is the ending point (index) of the selection, it should be a number value

Return Value

It returns an array

Working

The way the splice() method works is that the arguments passed inside it define the selection of elements to copy into the second array. Remember, the word used here is “copy” because the original array is not modified.

Example of the array.slice() method

To demonstrate the working of the array slice(), start by creating an array with the following line:

arrayVar = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 
After that, simply create a new variable which is going to store the return value from the slice() method and then set that variable equal to arrayVar.slice() with the following line:

returnedArray = arrayVar.slice(2, 6);

 
This above line selects the elements from index 2 to index 5 because the endpoint index passed in the argument of the slice() method is not included in the selection. After that, display the returnedArray on the terminal:

console.log(returnedArray);

 
Upon executing the program, the following result is displayed on the terminal:


To verify that this splice() method doesn’t affect the original array, simply print the original array onto the terminal as well:

console.log("The array after slice() method", returnedArray);
console.log("The original array is as", arrayVar);

 
Execute the program again to get the following output on the terminal:


It is clear from the output mentioned above that the original array was not affected with the slice() method.

The Array splice() Method

The array.splice() method (as mentioned above) is used to create or extract a sub-array from an array. However, the slice() method removes the selected elements from the original array and passes them onto the second array. To understand the Array splice() method, look at the syntax given below:

returnedArray = arrayVar.splice(start?:number, count?:number)

 
In this syntax:

    • returnedArray is used to store the return value of the splice() method
    • arrayVar is the array from which the second array is being created
    • start is the starting point (index value) of the selection, it should be a number
    • count is the number of elements to select from the starting point, it should be a number

Return Value

It returns an array

Working

The working of the splice() method is quite simple, it uses the values passed inside its arguments to make a selection from the original array. After that, it removes those elements from the original array and returns them as return value. This means that the splice() method does affect the original array

Example of the splice() method

To demonstrate the working of the splice() method, start by creating a new array with the following line:

arrayVar = [1, 2, 3, 4, 5, 6, 7, 8, 9];

 
After that, create a variable to store the returned value from the splice() method and set it equal to the arrayVar.splice() method like:

returnedArray = arrayVar.splice(2, 5);

 
In the above line, the selection starts from index 2 and counts 5 elements after that starting index. After that, simply pass the “returnedArray” variable to the console log to print the result on the terminal like:

console.log(returnedArray);

 
Executing the program will create the following result on the terminal:


It is clear from the output that the subarray has 5 elements subtracted from the original array. To demonstrate the effect of the splice() method on the original array, print out the original array as well using the console log function:

console.log("The array after slice() method", returnedArray);
console.log("The original array is as", arrayVar);

 
Executing the code will provide the following output on the terminal:


It is clear from the output that the selected elements were removed from the original array and moved to the second array which is returnedArray variable. So it is easy to conclude that the splice() method does alter the original array.

Wrap up

The array slice() method and the array splice() method are used to create sub-arrays from a parent array. The only difference between the two is how they perform their task. The slice() method creates a subarray by copying the selected elements from the parent array into the child array. While the splice() method creates a subarray by removing the selected elements from the parent array and putting them in the child array.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.