In this article, we will be taking a deep dive into Javascript arrays and how we can modify an array, i.e. add, remove, or replace elements using the splice() method.\u00a0<\/p>\n\n\n\n
What are Arrays in JavaScript?<\/strong><\/h2>\n\n\n\n
Arrays are linear data structures used to store homogenous data, i.e. same type of data. An array can contain all integers, all characters, or all strings as the elements. An array can not be a combination of integers and characters, or integers or strings. Let us take a look at how to declare and use arrays in Javascript.<\/p>\n\n\n\n
\/\/declaring an integers array\nlet marks = [98, 75, 62, 82, 97, 53];\n\n\/\/declaring a characters array\nlet grades=['A', 'B', 'A', '0'];\n\n\/\/declaring a strings array\nlet favtutors=[\"John\", \"Joshua\", \"Alex\", \"Kate\"];\n\n\/\/declaring a boolean array\nlet present=[true, false, false, true];<\/code><\/pre>\n\n\n\n
In the code above, we have made integers array marks containing all integers, a characters array grade consisting of all elements as characters, a strings array ‘favtutors’ consisting of all strings, and a boolean present array consisting of all boolean values.<\/p>\n\n\n\n
In JavaScript, we do not need to specify the type of the array at the compile time as it is a dynamically typed language. <\/p>\n\n\n\n
Array splice() function in JavaScript<\/strong><\/h2>\n\n\n\n
Splice means to unite or combine two separate elements into a whole. If we want to push some more elements to an array or delete some elements already present in the array, we splice the array. So, we can perform splicing on an array if we want to remove, add, or replace elements.<\/p>\n\n\n\n
To perform the splice operation, we have an inbuilt function. The array splice() method in JavaScript allows one to modify the contents of an array by removing, adding, or replacing elements.<\/strong> Note that the splice() method modifies the original array.<\/p>\n\n\n\n
The general syntax of the array splice() method in JavaScript is:<\/p>\n\n\n\n
array_name:<\/strong> Name of the array to be spliced <\/li>\n\n\n\n
index:<\/strong> The index from which the array must be changed\/modified. It is a required parameter and can have positive, 0, or negative values. <\/li>\n\n\n\n
remove_count:<\/strong> Specifies the number or the count of the items to be removed from the array. <\/li>\n\n\n\n
items: <\/strong>Represents the list of items to be added to the array. It is an optional parameter. If no item is to be added, the parameter is simply not given in the function.<\/li>\n<\/ul>\n\n\n\n
Note that, this is the general syntax of the splice function. It can be implemented in various ways which we will understand in the further sections.<\/p>\n\n\n\n
The splice() method is a standard feature of the ECMAScript JavaScript and is supported by all modern browsers, including Google Chrome, Mozilla Firefox, Safari, and Microsoft Edge. It is also supported in older versions of Internet Explorer. <\/p>\n\n\n\n
Use of splice() Method<\/strong><\/h2>\n\n\n\n
Let’s now learn what are the use cases of the splice() method. In this section, We will take a look at how to remove elements from various positions in an array in JavaScript using the splice() function. We can remove elements both from the start and end of an array in JavaScript.\u00a0<\/p>\n\n\n\n
Removing Elements from the Start of an Array<\/strong><\/h3>\n\n\n\n
We will first understand how to remove elements from the beginning of an array. Let\u2019s take several examples.<\/p>\n\n\n\n
Example 1:<\/strong><\/p>\n\n\n\n
\n
Define the marks array as marks=[98, 78, 92, 83, 65] <\/li>\n\n\n\n
Say, we have to remove three elements from the marks array from index 2. Note that in the array, indices always start from 0. So the element present at index 2 = 92.<\/li>\n<\/ul>\n\n\n\n
\n
Taking parameters into consideration, here the index = 2 (index starting where we want to remove elements). As we want to remove 3 elements, count = 3.<\/li>\n<\/ul>\n\n\n\n
Check out the code below.<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/we want to remove the marks of 3 students after index 2, i.e. after 92\nmarks.splice(2,3);\n\n\/\/printing the modified marks array\nconsole.log(marks);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 98, 78 ]<\/code><\/pre>\n\n\n\n
So, clearly, 3 elements starting from index 2 (i.e 92) are removed from the array marks. <\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\n
Example 2:<\/strong><\/p>\n\n\n\n
Let us take another example. <\/p>\n\n\n\n
\n
Now we want to remove two elements starting from index 2. We observe that the number of elements after the 2nd index (including it) is three (92, 83 & 65). <\/li>\n\n\n\n
But we are only removing 2 elements after the second index. So the last element i.e. 65 is not removed and will still be in the marks array.<\/li>\n<\/ul>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/we want to remove marks of 2 students(till the end) after the index 2, i.e. after 92\nmarks.splice(2,2);\n\n\/\/printing the modified marks array\nconsole.log(marks);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 98, 78, 65 ]<\/code><\/pre>\n\n\n
\n<\/figure>\n<\/div>\n\n\n
To print the elements removed, simply make an array and store the deleted elements in the array deletedMarks.<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/we want to remove marks of 2 students(till the end) after the index 2, i.e. after 92\nlet deletedMarks=marks.splice(2,2);\n\n\/\/printing the modified marks array\nconsole.log(marks);\n\n\/\/printing the deleted marks\nconsole.log(deletedMarks);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 98, 78, 65 ]\n[ 92, 83 ]<\/code><\/pre>\n\n\n\n
Removing Elements from the End of an Array<\/strong><\/h3>\n\n\n\n
The negative value is used as the index parameter to remove the element from the end of an array. <\/strong>Let\u2019s have a look at some examples.<\/p>\n\n\n\n
Example 3:<\/strong><\/p>\n\n\n\n
\n
We will remove one element from the names array from the last (the first element from the last) and hence index parameter is provided as -1. <\/li>\n\n\n\n
We have to remove just one element from the names array, so the count is given as 1.<\/li>\n<\/ul>\n\n\n\n
Code:<\/strong><\/p>\n\n\n\n
\/\/declaring a names array\nlet names=["John", "Joshua", "Alex", "Katie"]\n\n\/\/we want to remove the 1 name from the end i.e. Katie\nnames.splice(-1, 1);\n\n\/\/printing the modified names array\nconsole.log(names);<\/pre><\/div>\n\n\n\n
We will remove two elements from the names array from the second last and hence index parameter is provided as -2. <\/li>\n\n\n\n
We have to remove two elements from the names array, so the count is given as 2.<\/li>\n<\/ul>\n\n\n\n
Look at the code given below.<\/p>\n\n\n\n
\/\/declaring a names array\nlet names = ["John", "Joshua", "Alex", "Katie"]\n\n\/\/we want to remove the 2 names from the second last index i.e. Katie\nlet deletedNames = names.splice(-2, 2);\n\n\/\/printing the modified names array\nconsole.log(names);\n\n\/\/printing the deleted names\nconsole.log(deletedNames);<\/pre><\/div>\n\n\n\n
Removing the Elements along with Adding Some Elements<\/strong><\/h3>\n\n\n\n
Let’s say, we want to remove elements from an array along with adding some other elements. We simply provide a list of elements to be added as the parameters after the count parameter. Let us take a look at the example below.<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/we want to remove marks of 3 students(till the end) after the index 2, i.e. after 92\n\/\/and we also want to add some elements to the array\nlet deletedMarks=marks.splice(2,3,99,100);\n\n\/\/printing the modified marks array\nconsole.log(marks);\n\n\/\/printing the deleted marks\nconsole.log(deletedMarks);<\/pre><\/div>\n\n\n\n
In this example, we have removed three elements after index 2 and added two other elements, i.e. 99 and 100 to the marks array. We have simply provided 99 & 100 as parameters after the count (=3) parameter in the array splice function. <\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\n
In this section, we will take a look at how to add elements at various positions in an array in JavaScript using the splice() function.<\/p>\n\n\n\n
Adding Elements at the End of an Array<\/strong><\/h3>\n\n\n\n
To add elements at the end of an array using the splice() method, you need to provide the starting index as the length of the array and the number of elements to remove as 0. <\/p>\n\n\n\n
Take a look at the below example.<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/adding elements at the end of an array without deleting any\nlet deletedMarks=marks.splice(4,0,99,100);\n\n\/\/printing the modified marks array\nconsole.log(marks);\n\n\/\/printing the empty deleted marks array as no element is deleted\nconsole.log(deletedMarks);<\/pre><\/div>\n\n\n\n
We have not removed a single element and hence the array \u201cdeletedMarks\u201d is empty. We have instead added two elements 99 and 100 to the array by providing them as parameters to the splice() function.<\/p>\n\n\n\n
Adding Elements at Specific Indexes<\/strong><\/h3>\n\n\n\n
You can also use the splice() method to add elements at specific indexes in an array. Simply provide the desired starting index<\/strong> and the number of elements to remove as 0. Here’s an example:<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/adding elements at the index 2 of an array without deleting any\nlet deletedMarks=marks.splice(2,0,99,100);\n\n\/\/printing the modified marks array\nconsole.log(marks);<\/pre><\/div>\n\n\n\n
We have used the index=2, therefore elements 99 and 100 are added at index two and the rest of the elements are shifted to the right with none being deleted.<\/p>\n\n\n\n
Replacing Elements with the splice() Method<\/strong><\/h3>\n\n\n\n
If we think logically, Replacing just means deleting the elements at a particular index and adding some other elements at their place (the same index). So, Replacement of the elements is the combination of removal and addition of elements to the array.<\/p>\n\n\n\n
\/\/declaring a marks array\nlet marks=[98, 78, 92, 83, 65]\n\n\/\/replacing 2 elements from the index 0\nlet deletedMarks=marks.splice(0,2,99,100);\n\n\/\/printing the modified marks array\nconsole.log(marks);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 99, 100, 92, 83, 65 ]<\/code><\/pre>\n\n\n
\n<\/figure>\n<\/div>\n\n\n
In the above example, we first provide the index parameter as 0 starting with which two elements will be deleted (as the count=2). Then, we have provided a list of elements to be added to the array. Hence, we obtain the desired output.<\/p>\n\n\n\n
Important Points to Keep in Mind<\/strong><\/h2>\n\n\n\n
First, when working with empty arrays,<\/strong> the behavior of the splice() method differs slightly. If you call splice() with no arguments, it won’t remove any elements from the array.\u00a0<\/p>\n\n\n\n
\/\/declaring empty marks array\nlet marks = [];\n\n\/\/splicing the empty array\nlet deletedMarks = marks.splice();\n\n\/\/printing both arrays\nconsole.log(marks);\nconsole.log(deletedMarks);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ ]\n[ ]<\/code><\/pre>\n\n\n\n
In this example, we call splice() on an empty array. The method doesn’t remove any elements and returns an empty array.<\/p>\n\n\n\n
Also, if you provide an invalid index to the splice() method, splice() will attempt to perform the operation.\u00a0 If the index greater than the length of the array is provided, it will behave as an adding function and add the new elements to the array.\u00a0<\/p>\n\n\n\n
\/\/declaring nums array\nlet nums = [1, 2, 3];\n\n\/\/providing index greater than the length of the array and trying to store deleted elements\nlet del = nums.splice(5, 0, 4, 5);\n\n\/\/printing both arrays\nconsole.log(nums);\nconsole.log(del);<\/pre><\/div>\n\n\n\n
Output:<\/strong><\/p>\n\n\n\n
[ 1, 2, 3, 4, 5 ]\n[ ]<\/code><\/pre>\n\n\n\n
In this example, we provide an index (5) greater than the length of the numbers array. The splice() method adds the new elements (4 and 5) to the array.<\/p>\n\n\n\n
Finally, remember that the splice() method modifies the original array. If you want to avoid mutating the original array, you can make a copy of it before performing the splice operation. This can be done using the spread operator or the slice() method.\u00a0<\/p>\n\n\n\n
![\"Removing](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/1.png\")
<\/figure>\n<\/div>\n\n\n![\"Removing](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/2-1024x560.png\")
<\/figure>\n<\/div>\n\n\n![\"Removing](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/3-1024x560.png\")
<\/figure>\n<\/div>\n\n\n![\"Adding](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/4-1024x320.png\")
<\/figure>\n<\/div>\n\n\n![\"Adding](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/5-1024x320.png\")
<\/figure>\n<\/div>\n\n\n![\"Replacing](\"https:\/\/favtutor.com\/articles\/wp-content\/uploads\/2023\/11\/6-1024x320.png\")
<\/figure>\n<\/div>\n\n\n