How to Use the JavaScript Array Splice Method

JavaScript brings interactivity to web pages, making them more user-friendly. Web developers use arrays often when building these applications.

Arrays are the ordered list of items, and each item is identified by an index. JavaScript offers a large variety of data manipulation functions to perform add, remove, edit, sort, and perform a lot more operations on arrays.

In this article, we will discuss the use of the JavaScript splice() method on arrays. This method can be used on arrays holding any kind of value, such as integers, strings, or even objects. Let’s get started.

What does JavaScript array splice do?

The splice() method in JavaScript belongs to Array.Prototype and is very handy when it comes to altering items in an array.

Both splice() and slice() sound identical to new developers but have a big difference. With the array slice() method, you can get a portion of an array without actually modifying the original array. Meanwhile, the splice() method modifies the contents of the original array and returns the new array containing the deleted items.

Using the JavaScript array splice() method, you can remove the items from the existing array, add new items to the existing array, or even swap the items from the existing array with new items.

How to Use JavaScript Array Splice

The splice() method modifies the original array by altering its items. Adding or removing items from an array may change its length as well.

array.splice(start, deleteCount, element1, element2, ..., elementN)

The splice() method accepts three parameters

• start (required). This is a required parameter and has an integer value. This parameter provides the index/location of an item in an array from where modification would take place. Its value can be either 0, a negative integer, or a positive integer.

• A zero value indicates the starting of an array index, whereas the negative index value would indicate counting starts from the end of the array starting with -1.

• deleteCount (optional). This is an optional parameter, and also holds an integer value. It specifies the number of items to be removed from an array, beginning from the index specified in the start parameter. If you don’t want to remove items, deleteCount parameter should be zero. If not specified, all the elements starting from the start will be removed. On the other hand, if its value is greater than or equal to the length of the array, all the items from the array will be removed from the starting index.
• element1, element2,..., elementN (optional). This is also an optional parameter, and it specifies the items to be added to the array beginning from the index specified in the start parameter. If no elements are specified in this parameter, splice() will only remove items from the array.
• return value. This method returns an array containing all the items that were removed from the original array. If none of the elements are removed, an empty array will be returned.

JavaScript Array Splice in Action

Let’s dive further to see how the splice method produces different results on an array of strings.

Example 1

Example 2

Example 3

The above code, after applying the splice method, removes 1 item at index 2 and inserts 3 items specified in the third parameter, with a position starting at index 2.

Example 4

In this example, the index value is a negative integer, and we are not specifying a second parameter. So the output of the splice method will remove all items starting from index -3.

Example 5

In this case, we used the negative index. As a result, array item 'four' is removed starting from the end of the list. 'Seven', 'eight', 'nine' are added starting from position -3.

How to remove an element from an array

Deleting an element from an array seems simple. However, this could result in an empty index containing an undefined value.

Another option is to use array.shift() or array.pop() method and remove only one element at a time. These methods also remove items either from the beginning of an array or from the end of an array.

Javascript Array shift()

Javascript Array pop()

However, if you need to remove multiple items from the middle of the array, then you should use splice().

In this example, the array contains four types of fruit. We use the splice method to remove two items starting at index 1. As a result, it removed pineapple and mango from the fruit array which was otherwise not possible with shift and pop methods.

Getting started with the JavaScript array splice() method.

JavaScript array splice method is very handy to use. With a little practice, you’ll be able to add or remove items from any data set.