Learn JavaScript splice method
Add, remove and replace array elements using splice() method
The splice() method
The splice method in JavaScript help us to add, remove or replace array elements. We have other JavaScript methods to process array elements but this method has multiple features that help us process elements in specific positions of an array.
splice() method syntax
splice(startingPostion, deleteCount, item1, item2, itemN)
- 'start' is the index number, the splice method start processing array from this index
- 'deleteCount' is the number of elements we need to delete from the array
- 'item1... itemN' are the elements we need to add to the array
This method returns an array of elements those are removed from the array
Remove array elements using splice method
Remove the first element from an array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne.splice(0, 1);
console.log(arrayOne);
//console output [2, 3, 4, 5]
Remove first 2 elements from an array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne.splice(0, 2);
console.log(arrayOne);
//console output [3, 4, 5]
Remove the last element from an array
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(-1, 1);
console.log(arrayOne);
//console output [1, 2, 3, 4]
Remove the the last 2 elements from an array
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(-2, 2);
console.log(arrayOne);
//console output [1, 2, 3]
Remove one element from a specific position
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(2, 1);
console.log(arrayOne);
//console output [1, 2, 4, 5]
Remove two elements from a specific position
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(2, 2);
console.log(arrayOne);
//console output [1, 2, 5]
Add elements to an array using splice method
Add one element to the starting position
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(0, 0, 22);
console.log(arrayOne);
//console output [22,1, 2, 3, 4, 5]
Add one element after the first element
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(1, 0, 22);
console.log(arrayOne);
//console output [1, 22, 2, 3, 4, 5]
Add one element before the last element
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(-1, 0, 22);
console.log(arrayOne);
//console output [1, 2, 3, 4, 22, 5]
Add two elements before the last element
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(-1, 0, 22, 33);
console.log(arrayOne);
//console output [1, 2, 3, 4, 22, 33, 5]
Add one element to an array to a specific position
var arrayOne= [1, 2, 3, 4, 5];
arrayOne.splice(3, 0, 44);
console.log(arrayOne);
//console output [1, 2, 3, 44, 4, 5]
Replace elements in array using splice method
Replace the first element in the array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne .splice(0, 1, 11);
console.log(arrayOne)
//console output [11, 2, 3, 4, 5]
Replace the first two elements in the array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne .splice(0, 2,11,22);
console.log(arrayOne)
//console output [11, 22, 3, 4, 5]
Replace the last element in the array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne .splice(-1, 1, 22);
console.log(arrayOne)
//console output [1, 2, 3, 4, 22]
Replace the last two element in the array
var arrayOne = [1, 2, 3, 4, 5];
arrayOne .splice(-2, 2, 22, 33);
console.log(arrayOne)
//console output [1, 2, 3, 22, 33]
Replace elements at specific position
var arrayOne = [1, 2, 3, 4, 5];
arrayOne .splice(2, 2, 33,44);
console.log(arrayOne)
//console output [1, 2, 33, 44, 5]