JavaScript Splice: How to Use It

The JavaScript splice() method modifies an array. It is used to add new elements to an array or remove or change existing ones. splice() changes the array on which it is used. It does not create a new array.

It’s common to want to add or remove items from a list of existing elements. For example, say you have a program that returns information about employees. One employee is on leave. You may want to remove them from your program temporarily.

You can use splice() to add items to, remove items from, or modify items in an array. This method allows you to add or remove items from an array. In this tutorial, we’ll demonstrate how the splice() method works and how to use it in your JavaScript code.

Array Refresher

The contents of an array can include numbers, strings, and Booleans. In JavaScript, you can use an array to store multiple pieces of information instead of storing data in multiple variables. For example, if you have a class of ten students, you can create an array to list each of their names.

Arrays can be accessed using their index numbers, which begin at 0. Here’s an example array:

let arr = [“example”, “array”, “of”, “strings”]

JavaScript splice()

The JavaScript splice() method adds, changes, or removes an item from an array. splice() modifies an existing array.

Let’s take a look at the syntax for splice():

list_name.splice(index_to_add_or_remove, items_to_remove, items_to_add...) 

splice() accepts three parameters:

• The index number to start at (required)
• The number of items in the array you want to remove (optional)
• Items to add to the list (optional)

You can add multiple items to a list using splice. To do so, you must specify all the items you want to add as the final parameters.

splice() JavaScript: Delete From Array

We have a list of student names. Paul has moved to another school and. We want to remove him from our list of names. Here’s an example of splice() removing a name from our array:

var students = [“Alex”, “Fred”, “Molly”, “Paul”]
students.splice(3, 1);
console.log(students);

After running our code, we’ll get the following output:

[“Alex”, “Fred”, “Molly”]

We deleted the element starting with the index “3.” In this case, the JavaScript string we removed was “Paul.”

If we were to remove the second argument from our code, all items after the index “3” would have been removed as well.

splice() JavaScript: Add to Array

If we wanted to add another student to our array, we can also use splice(). If we add a third parameter, we could specify what should be added to the array. Here’s an example:

var students = [“Alex”, “Fred”, “Molly”, “Paul”]
students.splice(4, 0, “Hannah”);
console.log(students);

The output for this code is as follows:

[“Alex”, “Fred”, “Molly”, “Paul”, “Hannah”]

The new string “Hannah” was added to the end of the array, at the index position “4.” Notice that our second parameter was set to 0 because we are not removing any items from our array. Splice makes adding new elements to an array easy.

We could add multiple names by including additional parameters in our code:

var students = [“Alex”, “Fred”, “Molly”, “Paul”]

students.splice(4, 0, “Hannah”, “Lily”);

console.log(students);

This code adds both “Hannah” and “Lily” to our list.

splice() JavaScript: Add to and Remove from Array

If we want to add and remove items to an array at the same time, we can also use splice(). Here’s an example of this in action:

var students = [“Alex”, “Fred”, “Molly”, “Paul”]
students.splice(4, 0, “Hannah”);
console.log(students);

The output from this code is as follows:

[“Alex”, “Fred”, “Hannah”, “Paul”]

Our code has removed the item in the array with the index value of “2,” which was “Molly.” Then, our code added “Hannah” at the index position of “2.”

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

JavaScript Splice vs. Slice

Some developers get confused between the JavaScript slice() and splice() methods because slice() can also be used to remove elements from an array. However, there are a few differences between these two methods.

Firstly, slice() doesn’t change the original array, whereas (as seen above) splice does change the original array. In addition, splice() returns the new array with all the changes we made, whereas splice() only returns the removed item.

Conclusion

splice() adds items to, removes items from, or changes items in an existing array. You can add or remove as many items to an array as you would like using splice().

That’s all you need to know about splice() in JavaScript. In short, if you are looking to add or remove an element from JavaScript arrays, splice() can be a useful function to know.

To learn more about JavaScript, read our guide on the best tutorials for JavaScript beginners.