Slice
and Splice
are probably the most confusing array methods in JavaScript. Many experienced developers struggle to use them. This is because both of these methods can do the same operation but in different ways.
What Does Slice Method Actually Do?
Just think about the meaning of slice in general and you’ll get an idea of what this method does in programming. A slice is just a small piece of a big thing like a slice of a pizza. So, in JavaScript, the slice
method actually returns a part of the array from the given array.
How Slice Works in JavaScript
The slice method takes two arguments as parameters. The first argument is the starting index
and the second argument is the ending index
. It then returns all the elements from starting index to the ending index. See the example below to understand how it works.
1 2 3 4 5 6 7 8 |
const numbers = [2,34,5,64,67] const newArray = numbers.slice(0,3) console.log(newArray) // output : [2, 34, 5] |
Please note that the slice function excludes the ending index value and doesn’t modify the original array. so, in the above example, it returns 3 elements from the 0 index. That’s all about the slice method. It is just used to get the array elements by giving starting and ending indexes.
Splice Method in JavaScript and Its Uses
The splice
method can do the same thing as the slice
method but it is not designed for that. Let’s see how it can be used the same as the slice
function. Check the following example and compare the output with the first example.
1 2 3 4 5 6 7 8 |
const numbers = [2,34,5,64,67] const newArray = numbers.splice(0,3) console.log(newArray) // output : [2, 34, 5] |
As you can see in the above example even though slice
is changed to splice
, the output remained unchanged. Now let’s understand why it happened and how it works.
How to Remove Array Elements with Splice Method
By using splice
method, you can remove the array elements by giving two arguments. The first argument is the starting index
and the second element is the delete count
. It returns the deleted elements from the array and it also modifies the original array. So, in the example below, newArray stores the 3 deleted elements from index 0. Please note that the splice method also modifies the original array after deleting elements. If you don’t specify the delete count which is the 2nd argument, it will delete all the elements after the starting index.
1 2 3 4 5 6 7 8 9 10 11 12 |
const numbers = [2,34,5,64,67] const newArray = numbers.splice(0,3) console.log(newArray) // output : [2, 34, 5] // the splice method has deleted 3 array elemets // from index 0. The first argument is the // starting index and the second argument is delete count |
How to Insert Elements to an Array with Splice
You can insert elements into an array with splice
method in JavaScript. The 3rd argument which is optional can be used to insert element(s) into the array. This is the main purpose of using splice
when working with arrays. Check the following example which deletes 1 element from index 1 and adds a new element. It also returns the deleted element by default.
1 2 3 4 5 6 7 8 9 10 11 |
const numbers = [2,34,5,64,67,90] const newArray = numbers.splice(1,1, 22) console.log(newArray) // [34] console.log(numbers) // [2, 22, 5, 64, 67, 90] |
Inserting Multiple Elements into an Array with Splice
You can specify as many elements as you want after the 2nd argument. They will be inserted into the array. The example below inserts 3 elements on the 0 index without deleting anything.
1 2 3 4 5 6 7 8 9 10 11 |
const numbers = [2,34,5,64,67,90] const newArray = numbers.splice(0,0, 22,25,30) console.log(newArray) // output : [] console.log(numbers) // [22, 25, 30, 2, 34, 5, 64, 67, 90] |
In the above example, newArray
is empty because no delete count was specified. So, no elements from the array were deleted. You can see the numbers
array has 3 more elements that were specified after the delete count.
Conclusion
The two methods slice
and splice
are confusing array methods if you don’t know the exact usage. The slice
methods takes 2 arguments starting index and ending index and return array elements between both indexes without modifying the original array. The splice
method modifies the original array and returns the deleted elements from the array. The splice
method can also be used to insert the elements into an array. You can read more about splice
and slice
on Mozilla documentation.