Slice vs Splice in JavaScript – [End Your Confusion Today]

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.

slice vs splice in javascript

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.

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.

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.

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.

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.

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.

 

Latest articles

Related articles