What is the difference between Array.slice() and Array.splice() in JavaScript ?

Javascript arrays are variables that can hold more than one value. There are many methods associated with these arrays. The methods slice() and splice() are widely used methods for array manipulations. There are various differences between them which are listed in the table below.

slice()	splice()
This method is used to get a new array by selecting a sub-array of a given array.	This method is used to add/remove an item from the given array.
The parameter ‘s’ indicates the starting index and ‘e’ indicates the ending index. They denote the index of the sub-array to be taken. By default, the value for start is ‘0’ and end is ‘n’.	The parameter ‘i’ denotes the starting index, ‘n’ denotes the number of items to be removed from the specified starting index.‘item 1, item 2, …..item n’ represents the list of new items to be added at the given index. If n=0, no item is removed, the new items are just added to the specified starting index.
The changes do not reflect in the original array.	The changes reflect in the original array
The result has to be assigned to a new array variable.	The result need not be assigned to any other new variable.
The return value is new array with the values in the selected sub-array of the given array. The values in the range start to (end-1) will be selected.	The return value is an array containing the deleted element.
Takes exactly 2 arguments	Takes ‘n’ number of arguments (a list of new items can be supplied)

Syntax:

• slice():

  array_name.slice(s, e)

• splice():

  array_name.splice(i, n, item 1, item 2, .....item n)

Examples for slice() method
Example 1: Both the start and end are specified.

<script>
    var cars=['Benz', 'Innova', 'Breeza', 'Etios', 'Dzire'];
    var new_cars=cars.slice(1, 4);
    document.write("cars :", cars, "<br><br>");
     document.write("new_cars :", new_cars);
</script>

Output:

cars :Benz, Innova, Breeza, Etios, Dzire
new_cars :Innova, Breeza, Etios

Example 2: only the start is specified. The end is by default the length of the array.

<script>
    var cars=['Benz', 'Innova', 'Breeza', 'Etios', 'Dzire'];
    var new_cars=cars.slice(2);
    document.write("cars :", cars, "<br><br>");
    document.write("new_cars :", new_cars);
</script>

Output:

cars :Benz, Innova, Breeza, Etios, Dzire

new_cars :Breeza, Etios, Dzire

Examples for splice() method
Example 1: Now let us just add some more items but not remove any item.

<script>
    var cars=['Benz', 'Innova', 'Breeza', 'Etios', 'Dzire'];
    cars.splice(2, 0, 'ambassedor', 'BMW', 'Audi');
    document.write("cars :", cars, "<br><br>");
</script>

Output:

cars :Benz, Innova, ambassedor, BMW, Audi, Breeza, Etios, Dzire

Example 2: Removing one element and not adding any new item

<script>
    var cars=[
'Benz', 'Innova', 'ambassedor', 'BMW', 'Audi', 'Breeza', 'Etios', 'Dzire'];
    cars.splice(2, 1);
    document.write("cars :", cars, "<br><br>");
</script>

Output:

cars :Benz, Innova, BMW, Audi, Breeza, Etios, Dzire

Example 3: Removing more than one element and not adding any new item.

<script>
    var cars=[
'Benz', 'Innova', 'ambassedor', 'BMW', 'Audi', 'Breeza', 'Etios', 'Dzire'];
    cars.splice(2, 3);
    document.write("cars :", cars, "<br><br>");
</script>

Output:

cars :Benz, Innova, Breeza, Etios, Dzire

While removing more than one element, in the above case, the starting index specified is ‘2’ and ‘3-elements’ are required to be removed, so it starts removing elements from the index itself. Thus the items in index 2, 3 and 4 are removed.