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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.