JavaScript's Array splice Method

JavaScript's array splice method is very versatile; it allows you to add, remove, and/or replace elements in an array. Elsewhere in this tutorial, we show how to use it to add and remove elements. On this page we delve more deeply into the details of the splice method and its arguments. Then we show how to use it to replace elements in an array.

splice Method Arguments

The first argument to the splice method specifies the index location at which to start adding, removing, or replacing elements in the array. The second argument specifies the number of elements to delete. (It would be 0 if you are just adding elements to the array.) Any subsequent arguments are elements to be added to the array.

Start Location Argument

If start location is the only argument provided, the elements from that index location through the end of the array are removed. The following example demonstrates invoking the slice method with just a start location (4):

var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
// display ar.splice return value
console.log( ar.splice(4) ); // [ "e", "f", "g" ]
// display modified array
console.log( ar ); // [ "a", "b", "c", "d" ]

The splice method returns an array consisting of removed elements. Notice in the example above that the array returned by the slice method includes the element specified as the start location.

The splice method modifies the array on which it is invoked. In the example above, the modified array consists of the elements up to but not including that specified as the start location.

The start location can be specified using a negative number. A negative start value specifies the number of elements from the end of the array as the starting point for the adding, removing, and/or replacing elements. We can remove the last three elements from the array as follows:

var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
// display ar.splice return value
console.log( ar.splice(-3) ); // [ "e", "f", "g" ]
// // display modified array
console.log( ar ); // [ "a", "b", "c", "d" ]

deleteCount and Array Elements Arguments

As mentioned above, the second argument to the slice method is for specifying how many elements you want to delete from the original array. The example below demonstrates removing three elements starting from index location 2:

var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
// arguments: start location, number of elements to delete
console.log( ar.splice(2, 3) ); // [ "c", "d", "e" ]
console.log( ar ); // [ "a", "b", "f", "g" ]

Arguments to the slice method after the second specify elements to be added to the array. As mentioned above, you can pass 0 as the second argument to indicate that no elements should be deleted. We demonstrate adding three elements to the example array below while removing none:

var ar = [1, 2, 3, 4, 5, 6];
console.log( ar.splice(3, 0, 'one', 'two', 'three') ); // [  ] (empty array)
console.log( ar ); // [ 1, 2, 3, "one", "two", "three", 4, 5, 6 ]

Unlike the concat method,[1] if arguments passed to the splice method are arrays themselves, these arrays will be inserted into the original array rather than their individual elements being added to it, as we demonstrate here:

var ar = [1, 2, 3, 4, 5, 6];
// use splice to add sub-arrays
console.log( ar.splice(3, 0, ['one', 'two', 'three'], ['four', 'five', 'six']) ); // [  ]
// show length of array modified by splice
console.log( ar.length ); // 8
// display contents of 4th element of modified array
console.log( ar[3] ); // [ "one", "two", "three" ]

Since console.log does not give a helpful display of sub-arrays, we give other evidence of the results in the example above.

Elements of the array modified by splice are re-numbered sequentially, starting from 0.

Using splice to Replace Elements in an Array

Now that we have covered the arguments and details of the splice method, we can demonstrate how to use it to replace elements in an array. We replace the third and fourth elements in the example array below:

var ar = [1, 2, 3, 4, 5, 6];
// replace 2 elements starting from index location 2
console.log( ar.splice(2, 2, 'three', 'four') ); // [ 3, 4 ]
console.log( ar ); // [ 1, 2, "three", "four", 5, 6 ]

The number of elements inserted does not need to match the number of elements removed, as the following example demonstrates:

var ar = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
// delete 4 elements, insert 3 in their place
console.log( ar.splice(3, 4, 'one', 'two', 'three') ); // [ "d", "e", "f", "g" ]
console.log( ar ); // [ "a", "b", "c", "one", "two", "three" ]

Back to top


  1. Find out more about the concat metod. ^