JavaScript Splice Method Explained in Detail

JavaScript has multiple methods for string and array data type, most of them are useful, So today, We are going to learn about one of them, which is splice.

The given definition for splice method is that it updates(modifies) the existing array and returns a part of the array which is cut from the original array as per given values to splice method.

Most of us just use the splice method to cut only the required part from the array, but you can do a lot more than just cutting a part of an array. That’s what we are going to explore in this article.

We are going to start from the beginning of the splice, what splice method is, what are the possible ways to use a splice method over an array.

What is Splice?

Splice is a method, which can be used to update or modify an array, also the part which is being cut or updated will be returned as array from splice method, and splice method only works for arrays the splice method is not made for string data type so never try to use a splice method on string you’ll get only errors, nothing else :).

Let’s cover all the possible ways to use the splice method on an array.

1. Passing single argument

Splice method takes multiple arguments but starting two are important and the first one is the most important the first argument of the splice() method tells splice to cut down the array from that index to the last index, the starting index is included which means if we have an array [1,2,3,4,5] and we pass splice(1) index 1 then from index 1 to the last index all values will be deleted from our original array and splice() method will return those values as new array, below is the code for the following scenario, one more thing you can cut the array from right to left as well by providing negative index value in the first argument of splice method.

1. Passing Positive Index

below is the example for this:

arr = [1, 2, 3, 4, 5];
arg = arr.splice(1);
console.log(`original array ${arr}`);
// [1]
console.log(`array returned by splice ${arg}`);
// [2,3,4,5]

2. Passing Negative Index

Below is the example for this:

arr = [1, 2, 3, 4, 5];
arg = arr.splice(-3);
console.log(`original array ${arr}`);
// [1,2]
console.log(`array returned by splice ${arg}`);
// [3,4,5]

The splice method always cuts or updates the array from left to right even if the given arguments are negative, this is the important thing always need to remember as a JavaScript Developer.

2. Passing two arguments

We learned in the previous block that what the first argument does in the splice method, now let’s understand the second argument, what it does and what are the possible ways to use the second argument of the splice method.

Second argument of the splice method is for the items you want to delete or cut from the array.

For example we have an array [1,2,3,4,5] and you want to cut the only two index from this array, if it’s 4,5 , not middle indexes, then it’s good you can use single argument in splice method but you want 2,3 to be cut or removed from array then you might have to use second argument which will tell splice method that our job is done return back the data, syntax: arr.splice(1,2), It’ll cut two indexes from original array and return us the [2,3] into new array.

Below is the some use cases of passing two arguments:

Passing Positive Argument

arr = [1, 2, 3, 4, 5];
arg = arr.splice(1, 2);
console.log(`original array ${arr}`);
// [1,4,5]
console.log(`array returned by splice ${arg}`);
// [2,3]

Passing First Negative argument

arr = [1, 2, 3, 4, 5];
arg = arr.splice(-3, 2);
console.log(`original array ${arr}`);
// [1,2,5]
console.log(`array returned by splice ${arg}`);
// [3,4]

• If you provide second argument 0 or nil then you’ll get no changes in array and as well no return value.
• If your array length is 5 and you provide -1 in the first argument, in second you provide something 3, then you’ll only cut the last index from the array, it’ll not give any error regarding second argument passing length or something etc.

Below is the example for this case:

Second argument zero

arr = [1, 2, 3, 4, 5];
arg = arr.splice(1, 0);
console.log(`original array ${arr}`);
// [1,2,3,4,5]
console.log(`array returned by splice ${arg}`);
// []

exceeding array length arguments

rr = [1, 2, 3, 4, 5];
arg = arr.splice(-1, 3);
console.log(`original array ${arr}`);
// [1,2,3,4]
console.log(`array returned by splice ${arg}`);
// [5]

3. Passing three or more arguments

Now we have idea of two arguments what each one of them do, let’s learn about three or more, the possible things you can do with three or more arguments are like you can add new indexes in array, update the index values, delete the index values, how we can do these all of things let’s see below is the example code for all of these mentioned ways:

Syntax of three arguments of splice():

arr.splice(startIndex, elementsToDelete, replacewith…)

Add Values In Array

So for adding the values into array without updating any value using splice method is very easy, what we have to do is that, first we need to add our index from where we want to start adding values then for second argument we need to provide 0, which means we don’t want to update any value, just add them from the given index and move others, already in same position to right side which makes array length to increase automatically.

Below is the code example of this:

arr = [1, 4, 5, 6, 7];
arg = arr.splice(1, 0, 2, 3);
console.log(`original array ${arr}`);
// [1,2,3,4,5,6,7]
console.log(`array returned by splice ${arg}`);
// []

Update Values In Array

We have seen how we can add new values in an array using splice, the only difference is that if you need to update your array values then you’ll need to provide the second value as a valid number, zero will not work :). Below is the example code for updating array using splice method:

arr = [1, 4, 5, 4, 5];
arg = arr.splice(1, 2, 2, 3);
console.log(`original array ${arr}`);
// [1,2,3,4,5]
console.log(`array returned by splice ${arg}`);
// [4,5]

Updating and Deleting at the same time

Yes you can update and delete values at the same time as well using splice, let’s see how for example you have an array [1,4,5,4,5] and you want update index 1,2 values and wants to remove index 3 value then you’ll need to pass your second argument higher than your updating values like: arr.splice(1, 3, 2, 3) this will first add those values in same index and once the values are updated will remove index 3 value, below is the example for this scenario:

arr = [1, 4, 5, 4, 5];
arg = arr.splice(1, 3, 2, 3);
console.log(`original array ${arr}`);
// [1,2,3,5]
console.log(`array returned by splice ${arg}`);
// [4,5,4]

There are multiple ways you can use the splice method. Try some on your own as well if you find this article helpful then hesitate to share this with your friends. It's origianally published on my website, If you found this helpful check more articles like that on my website

You can follow me on these platforms as well:

My Personal Blogging Website : Programming Geeks Club
My Facebook Page : Programming Geeks Club
My Telegram Channel : Programming Geeks Club
My Twitter Account : Kuldeep Singh
My Youtube Channel: ProgramminGeeksClub