What Splice( ) Does

Splice( ) is the most flexible array method in JavaScript. It can add, remove, insert, and replace any element anywhere in an array. Fundamentally, splice( ) does three things:

Splice( ) removes array elements that are in sequence - next to each other - in an array. Remaining elements are renumbered (index numbers updated) automatically. You can remove any number of elements.

Splice( ) can add a sequence of array elements anywhere in an array.

Splice( ) can both remove array elements and replace them with new elements anywhere in the array. This can be done with one statement.

This flexibility makes the splice( ) method very powerful and often used. Below is the syntax of this method.

Syntax

Here's the universal syntax for the splice( ) method:

array_name.splice(indexNumber,numberOfElementsToRemove, itemToAdd1,itemToAdd2 ...)

You start out just typing in the array name and then a dot and "splice()". The parameters in the parentheses falls into three categories. All are separated by commas.

The first thing in the parentheses in the index number of an array element. This can be the first element to remove or the first index number of something we want to add. It is always a number or variable representing a number.

The second part is the number of elements you want to add/remove/replace.

The remaining parameters are array elements you want to add. We'll go into this later. In this tutorial, we'll just be removing items using the first two numbers - the index and number of elements to remove.

Removing Array Elements With Splice ( )

You can see what removing things with splice( ) does in this example. Note that I've loaded an array in the textarea. Here's what that array looks like in code:

var dynamic_array = new Array();
dynamic_array[0] = "dogs";
dynamic_array[1] = "cats";
dynamic_array[2] = "parakeets";
dynamic_array[3] = "goldfish";
dynamic_array[4] = "ferrets";

You can remove any item or number of items from the array using the textboxes to the left. Just type in the index number (element number, array number) of a given element - i.e. "dogs" would be 0.

In the second textbox, enter the number of items you'd like to remove. Click the "Remove" button and the the elements will be removed from the array and the display updated. This is done using splice( ).

Say you wanted to remove "cats" and "parakeets". You'd enter the index of the first element - "cats" - into the first box. That would be a 1. In the second box you'd enter a 2 for the number of items you'd want to remove.

Here's the function that uses splice( ) and makes the whole thing work:

function remove_items(){

var index_value = document.form1.index1.value;

var range = document.form1.total_to_remove.value;

dynamic_array.splice(index_value,range);

load_array();
}//ends remove_items function

The first two statements of the function get the data from the textboxes and assign them to variables. The next statement, in red, is the one that does the work. It uses splice( ) along with the the two variables to change the array. The last line "load_array()" just leads to another function that updates the display.

Lets walk through the function if we were to remove "cats" and "parakeets". We'd enter a 1 in the first box named "index1" and a 2 in the second box named "total_to_remove". Then we'd click the "Remove" button and start the functon.

The 1 from the first box would be assigned to "index_value". The 2 from the second box would be assigned to "range". The splice( ) statement would use these variable values to manipulate the array. The splice( ) would begin at the element with the index of 1 - "cats". It would remove two items beginning at "cats". That would be "cats" and "parakeet".

Summary & Exercises

In this tutorial we learned how to remove array elements using the splice( ) method. We learned the universal syntax for the method and how to remove items using two numbers in the parentheses.

The first number is the index of the first element we want to remove. The second number is the total number of items we want removed. All elements must be next to each other. The two values are separated by commas.

Using the example, try entering bad data in the boxes. Try entering letters (numbers are needed). Try entering numbers too large or small for the array. You'll notice that nothing happens. The program does not crash even though I've coded no error control.

One of the best features of using array methods to update dynamic arrays is that errors are automatically handled with a default action of nothing.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index