Array.prototype.splice()

  
The splice() method changes the content of an array by removing existing elements and/or adding new elements.

splice() can remove as well as add elements from an array and that too at the same time. JavaScript splice if used to add and remove elements at the same time, takes in 3 arguments and this process of removing and adding elements is called splicing.
When trying to add an element or multiple elements to an array, we need to specify the index from which to add the elements, number of elements to be removed if any and the new elements to be added if any.

array.splice(start, deleteCount[, item1[, item2[, ...]]])

Parameters

start

Index at which to start changing the array. If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end.

deleteCount

An integer indicating the number of old array elements to remove. If deleteCount is 0, no elements are removed. In this case, you should specify at least one new element. If deleteCount is greater than the number of elements left in the array starting at start, then all of the elements through the end of the array will be deleted.

itemN

The element to add to the array. If you don't specify any elements, splice() will only remove elements from the array.

Returns

An array containing the deleted elements. If only one element is removed, an array of one element is returned. If no elements are removed, an empty array is returned.

Description

If you specify a different number of elements to insert than the number you're removing, the array will have a different length at the end of the call.

Using splice()

The following script illustrates the use of splice():

var myFish = ['angel', 'clown', 'mandarin', 'surgeon'];

// removes 0 elements from index 2, and inserts 'drum'
var removed = myFish.splice(2, 0, 'drum');
// myFish is ['angel', 'clown', 'drum', 'mandarin', 'surgeon']
// removed is [], no elements removed

// removes 1 element from index 3
removed = myFish.splice(3, 1);
// myFish is ['angel', 'clown', 'drum', 'surgeon']
// removed is ['mandarin']

// removes 1 element from index 2, and inserts 'trumpet'
removed = myFish.splice(2, 1, 'trumpet');
// myFish is ['angel', 'clown', 'trumpet', 'surgeon']
// removed is ['drum']

// removes 2 elements from index 0, and inserts 'parrot', 'anemone' and 'blue'
removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue');
// myFish is ['parrot', 'anemone', 'blue', 'trumpet', 'surgeon']
// removed is ['angel', 'clown']

// removes 2 elements from index 3
removed = myFish.splice(3, Number.MAX_VALUE);
// myFish is ['parrot', 'anemone', 'blue']
// removed is ['trumpet', 'surgeon']

To empty the whole array:
    arr.splice(0);
To add elements at the beginning of the array.
    arr.splice(0,0,'newitem');
To add element as last element of an array.
     (set index as (length of the array) or a number greater than the length of the array. Let's add an element  to end of an array)
   arr.splice(arr.length,0,"newitem");
To add element as 2nd-last element in an array.
  arr.splice(-1,0,"newitem");
To remove second element from an array.
 arr.splice(1,1);

Apart from adding and removing elements of an array, sometimes it's required to replace a particular element of an array. Replacing an element can also be accomplished using splice(). Replacing an element using splice() is actually a combination of removing and adding element. Suppose, we need to replace the JavaScript element with another new element called Perl. Here is how it is accomplished:

var categories = ['JavaScript', 'C#', 'Python', 'Java', 'HTML'];


 


console.log('Category list before removal is ', JSON.stringify(categories));


 


var removedCategories = categories.splice(0,1,'Perl');


 


console.log('Removed categories are ', JSON.stringify(removedCategories));


 


console.log('Category list after removal is ', JSON.stringify(categories));

In order to replace the element, we set the index to remove as 0 and number of element to remove as 1 to remove `JavaScript` element and specified a new element called `Perl` to be added at its place. Here is the output of the above code:

Category list before removal is['JavaScript', 'C#', 'Python', 'Java', 'HTML']


 


Removed categories are['JavaScript']


 


Category list after removal is['Perl', 'C#', 'Python', 'Java', 'HTML']

Posted in: JAVASCRIPT