JavaScript methods Splice() Split() Slice()

Photo by Element5 Digital on Unsplash

Javascript methods help us achieve a wide variety of tasks when programming. The benefit of them all really comes when we practice using them helping us understand what they are truly capable of. This article we’ll talk about “split()”, “splice()”, and “slice()”. Confused yet? Ha I was too when I came across them considering they sound so similar. I will be going over the differences of them all showcasing examples.

SLICE ()

This JavaScript method can be used on arrays and strings. It returns a copy of the array or string between two indices and does NOT modify the original array or string.

This is the setup for slice(): “arr.slice(start, end)” or “arr.slice(start)”. For example if we wanted to get the subarray between indices 2 and 5 we would write….

arr.slice(start, end)…

You see that the slice starts from the second indice and ends before the fifth indice. Thats the tricky part! It never returns the fifth indice only what is right before it.

arr.slice(start)…

Now if you wanted to return a subarray starting from just one indice you can follow as well. For example…

As you can see here the array was “sliced” starting from the second indice and every indice after it.

Both of these examples work with strings too…

SPLICE ()

Sounding very similar to the above method you can see why to most developers it can be confusing on which to use. Even for me now sometimes I go back and forth on which to use. Hoping writing this article solidifies it for me ::crosses fingers:: 🤞🏼. With splice() this does however modifies the original array by adding or deleting from the array itself.

Removing an element from an array you need to supply the starting indice followed by the number elements to be removed after it….

As follows you can input one number and every element after that number will be removed from the array….

Adding elements to an array using the splice() method you will need to add other parameters. Without deleting any elements in your array your method would specify as so. Starting at whatever indice you’d like and the second parameter being 0 since you do not want any elements to be deleted. All followed by elements that you’d like to add to the array…

You can also remove elements when adding elements. Replacing them from the array by adjusting the second parameter to the number of elements you wanted deleted. All while replacing them with the first two parameters stating what indice to start deleting from and how many elements to delete from the starting point. Then replacing it all with “x” and “y”.

This JavaScript method however does NOT work on strings!

SPLIT()

This method is used specifically for strings. It divides a string into substrings and returns them as an array. The set up would be “string.split(“separator”, limit)”…

The separator is what you want to separate the string. It can be anything that exists in the string itself. And the limit is how many elements you want in the new array. Examples…

Or you can leave out the second parameter as so…

As you can see the “separator” finds what you’re asking for and separates the strings at those points.

Conclusion:

I hope this helped you break up the confusion on all three JS methods. It certainly did for me and learned a lot in the process!

Below are the resources that I used in helping my understanding. Thank you for reading :)

Let's clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript

[ JavaScript ] Splice, Slice, Split

What is the difference splice, slice, and split method in Javascript ?

You see that the slice starts from the second indice and ends before the fifth indice.