JavaScript Splice – How to use the JS array method .splice()


The splice() method is a built-in method for JavaScript Array objects. It allows you to change the contents of your array by removing or replacing existing elements with new ones.

This method modifies the original array and returns the removed elements as a new array.

In this tutorial you will learn how you can remove, add, or replace elements of an array using splice() method. Let’s start with removing elements from an array first.

How to remove array elements with splice()

For example, suppose you have an array named months but you have some date names in the array like this:

let months = ["January", "February", "Monday", "Tuesday"];
A mixed array of month and day names

You can use splice() method to remove date name from months and add it to a new array at the same time:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2);

console.log(days); // ["Monday", "Tuesday"]
Create an array of dates

The splice() method needs at least one parameter, which is start index where the splice operation starts. In the above code, the number 2 passed to the method, which means splice() will start removing elements from the index 2.

You can also specify the number of elements you want to remove from the array by passing a second number the argument is called removeCount. For example, to remove just one element, you can pass the number 1 like this:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 1);

console.log(days); // ["Monday"]
console.log(months); // ["January", "February", "Tuesday"]
Remove only one element from the array

When you skip removeCount parameters, splice() will remove all elements from start index to the end of the array.

How to remove and add array elements using splice()

This method also allows you to add new elements immediately after the delete operation. You just need to pass the elements you want to add to the array after the number of deletions.

The full syntax of splice() as follows:

Array.splice(start, removeCount, newItem, newItem, newItem, ...)
Splice() array method syntax completion

The following example shows how you can remove “Monday” and “Tuesday” while adding “March” and “April” to months array:

let months = ["January", "February", "Monday", "Tuesday"];
let days = months.splice(2, 2, "March", "April");

console.log(days); // ["Monday", "Tuesday"]
console.log(months); // ["January", "February", "March", "April"]
Use splice() to remove and add elements to an array

How to add new array elements without removing any

Finally, you can add new elements without removing any by passing the number 0 arrive removeCount parameters. When no elements are deleted, the splice method returns an empty array. You can choose whether to save the returned empty array into a variable.

The following example shows how you can add a new element "March" next "February" without removing any elements. Since splice() method returns an empty array, you don’t need to store the returned array:

let months = ["January", "February", "Monday", "Tuesday"];
months.splice(2, 0, "March");

// ["January", "February", "March", "Monday", "Tuesday"]
The splice() method is called without returning any elements


You just learned how splice() method of operation. You did a great job!

The splice() this method is mainly used when you need to remove or add new elements to an array. In some cases you can also use it to split an array with mixed content like in the above case.

When you remove 0 elements from the array, then the method will just return an empty array. You are always free to assign the returned array to a variable or omit it.

Hope this helps!

Source link