JavaScript Splice: Method Explained with Examples

Working with arrays is important in JavaScript development. Whether you’re working with a list of items, updating records of users, or changing the data dynamically, arrays are present everywhere. The JavaScript splice method allows you to add, remove, or replace items directly in an array. The most important thing about the JavaScript splice method is that it changes the original array instead of creating a new one. This helps developers and users to write code that executes fast and uses less memory.

In this blog, you will learn all about the JavaScript splice() method and how to use the splice method in JavaScript with examples and common real-world use cases.

Table of Contents:

• JavaScript Array
• The splice() Method in JavaScript
  • Syntax
  • Parameter
  • Return Value
• JavaScript splice() Method Examples
  • Example 1: Removing Elements from an Array
  • Example 2: Adding Elements to an Array
  • Example 3: Replacing Elements in an Array
  • Example 4: Using splice() with Negative Indices
• Common Use Cases
• Browser Compatibility
• Conclusion

JavaScript Array

In JavaScript, an array is defined as a special type of variable that can hold more than one value at a time, which means you don’t need to create separate variables for each and every item of JavaScript array, you can store all the values in a single variable by declaring it as an array.

Syntax:

let learners = ["L1", "L2", "L3", "L4", "L5"];

Here, you are creating an array called learners. This “learners” array stores the learner’s name. You can use multiple methods on this array, one of which is the splice method in JavaScript.

The splice() Method in JavaScript

The splice method in JavaScript is used to change the contents of an array. By using this method, users can add, remove, and change the existing items of an array. All of this is done by directly changing the original array, which means no new array is created.

Syntax

array.splice(startIndex, deleteCount, item1, item2, ...);

Parameter

The splice method in JavaScript is very important and mostly used by developers when they are working with arrays. Here are the parameters that are used with the JavaScript splice Method:

• startIndex: The startIndex parameter tells JavaScript from where it has to begin.
• deleteCount: It is the count of how many items you want to remove from the startIndex. If you set it to 0, then no items will be removed.
• item1, item2,…: This is the optional parameter that is used when you have to add some items into the array starting from the startIndex.

Launch Your Web Development Career

Start Learning Now

Explore Program

Return Value

The JavaScript splice() method always returns a new array that contains all the items that were removed from the original array. The splice in JavaScript always changes the original array.

Example:

Output:

Explanation: In this example, you are using the splice method, which returns an array (res) that contains the deleted items. Here, it starts with the L2, removes 2 items from the original array (L2 and L3), and adds L7 in their place.

JavaScript splice() Method Examples

Here are some more examples of the splice() Method in JavaScript. These examples help you to understand more about the splice() method:

Example 1: Using splice in JavaScript for Removing Elements from an Array

Output:

Explanation: You can use the splice method in JavaScript to remove one or more items from an array. In this example, you remove some of the learners from the learners array.

Example 2: Using splice in JavaScript for Adding Elements to an Array

Output:

Explanation: The splice method in JavaScript also allows you to add new elements to the original array. In this code, you have an array called learners. The learners.splice(1, 2, “L6”, “L7”) will tell JavaScript to start at index 1 (“L2”) and remove 2 items from the array (“L2” and “L3”). and inserts “L6” and “L7” in the array in their place.

Example 3: Using splice in JavaScript for Replacing Elements in an Array

Output:

Explanation: In this example, the JavaScript splice method is used to replace one item with another. Here, learners.splice(1, 1, “L2.2”) means, the JavaScript starts with index 1 and removes 1 item from the array (“L2”) and replaces L2 with L2.2.

Example 4: Using splice() with Negative Indices

Output:

Explanation: You can also use the splice method with negative indices. In this example, the learners.splice(-2, 1, “L6”) starts with index -2 (L4) and removes the L4 from the array and adds L6 in place of L4.

Common Use Cases

The splice method in JavaScript is very helpful while working with JavaScript Arrays. It allows the users to add, remove, or replace items in the array. Here are some important real-world use cases of the splice method in JavaScript:

• By using splice in JavaScript, you can easily remove one or more items from the original array by giving the positions and number of items that you want to delete.
• The JavaScript splice method is also used to add some value at the start, middle, or end of the original array.
• You can use the JavaScript splice method to remove the extra items, like empty values, or duplicate data.
• In projects, like a to-do application or shopping carts on e-commerce websites. The splice method is helpful in updating arrays when users add or delete items.

Browser Compatibility

The splice method in JavaScript works well with all browsers. Here is the list of all the commonly used browsers that support the JavaScript splice method.

• Google Chrome
• Mozilla Firefox
• Safari
• Microsoft Edge
• Opera Mini (partial support)
• Internet Explorer

Conclusion

The splice method in JavaScript is an easy and important method that is used while working with arrays in JavaScript. Whether you want to add or remove items from an array or even want to replace values, the JavaScript splice method helps you to do this. It can make changes in the original array, which means it helps in executing JavaScript code faster. Understanding the JavaScript splice method helps you to write efficient code.

To learn more about JavaScript functions, check out this Web Development course and also explore JavaScript Interview Questions prepared by industry experts.

JavaScript Array splice() Method – FAQs