Learn JavaScript splice method

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]