JavaScript

Array splice() Method in JavaScript | Explained

JavaScript provides a very handy array method named array.splice() that serves multiple functionalities. For example, the array.splice() method can be used to add new elements to an array, delete existing array elements, and replace existing array elements. Using the array.splice() method, we can add and delete various elements in one go.

This post will present a comprehensive overview of the below-listed learning outcomes regarding array.splice() method in JavaScript:

So, let’s begin!

What is array.splice() in JavaScript?

It is a built-in array function that modifies an array by adding new elements to it or removing/replacing the existing elements from it. The array.splice() method first modifies the original array and then returns a new array of removed elements.

Syntax of array.splice()

The below snippet will help you to understand the basic syntax of the array.splice() method:

array.splice(index_number, delete_count, newElements)

The listed points will provide you with detailed information about the parameters of array.splice() method:

  • The array.splice() method must take a parameter “index_number” that specifies the position to add or remove elements.
  • The splice() method can take two optional parameters, “delete_count” which specifies the number of elements to be removed, and the second parameter is to add new elements to the array.

How to use array.splice() method in JavaScript?

In this section, we will understand the working of the array.splice() method with the help of some relevant examples.

The task is to delete the array elements using array.splice() method in JavaScript:

In this program, firstly, we will create an array named “countriesName” and will assign it some country’s names. Next, we will utilize the array.splice() method and we will pass it “3” as a parameter:

const countriesName = ["Argentina", "Australia", "Pakistan", "Brazil", "Denmark", "England"];

const deletedElements = countriesName.splice(3);

console.log("Original Array: " , countriesName);

console.log("Array of Deleted Elements: ", deletedElements);

The splice() method will delete the elements from the third index till the last index of the array and it will return an array of deleted elements:

The output shows the array.splice() method returns an array of deleted countries.

The task is to delete the array elements from the user-specified position using array.splice() method:

const countriesName = ["Argentina", "Australia", "Pakistan", "Brazil", "Denmark", "England"];

const deletedElements = countriesName.splice(3,1);

console.log("Original Array: " , countriesName);

console.log("Array of Deleted Elements: ", deletedElements);

In this example, we passed two parameters to the array.splice() method i.e. 3 and 1. Here, “3” represents the position of the element to be deleted and “1” represent a total number of elements to be deleted:

The output verified that this time the splice() method deleted the element from the user-specified position.

The task is to delete “one” element present at index “3” and add two new elements

In this example, we will delete the “Brazil” from the array and will add two elements “Srilanka” and “Italy” using array.splice() method:

onst countriesName = ["Argentina", "Australia", "Pakistan", "Brazil", "Denmark", "England"];

const deletedElements = countriesName.splice(3, 1, "Srilanka", "Italy");

console.log("Original Array: " , countriesName);

console.log("Array of Deleted Elements: ", deletedElements);

The above program will produce the following output on successful execution:

This is how we can add and delete elements in an array using the array.splice() method.

The task is to insert a new element without deleting any other array element:

const countriesName = ["Argentina", "Australia", "Pakistan", "Brazil", "Denmark", "England"];

const deletedElements = countriesName.splice(3, 0, "Srilanka", "Italy");

console.log("Original Array: " , countriesName);

console.log("Array of Deleted Elements: ", deletedElements);

If we have to add new elements without deleting any existing array element then we have to pass 0 to the delete-count parameter:

The output shows that the new elements are added to the array without deleting the existing array elements.

Conclusion

In JavaScript, array.splice() is a built-in function that modifies an array by adding new elements to it or removing/replacing the existing elements from it. The array.splice() method first modifies the original array, and after that, it returns a new array of removed elements. This write-up explained what array.splice() is and how it works in JavaScript.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.