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.
