How to Work with JavaScript Array Splice Method?

1. Splice Method’s Parameter Values Explained

Before we move further, let me explain the arguments passed into the splice method.

ArrayName.splice(start, how_many_items_to_remove, item1, item2, ...);

start
The index number is the required value, it specifies the position of an array from where the array starts changing. If passed negative value, then it will calculate the position from the end of the array.

how_many_items_to_remove
This parameter decides the total items to be deleted from the array. If this parameter is set to 0 or negative, then no elements will be removed from the array.

item1, item2, ...
This parameter defines the item in an array. This argument is not required.

2. How to Insert an Item in An array using JavaScript’s Array.splice() Method?

Let’s start with a very basic example of by adding an item in a cars array with the JavaScript’s Array splice() method.

// cars Array
var carsArray1 = ['Tesla', 'Toyota', 'BMW'];
var carsArray2 = ['Honda', 'Ford', 'Porsche', 'RR'];


// Add 1 items at the starting of cars array
// Show carsArray1 result in console
// Answer will be [ 'Suzuki', 'Tesla', 'Toyota', 'BMW' ]
carsArray1.splice(0,0, 'Suzuki');
console.log(carsArray1);


// Add 2 items in cars array at 2nd and 3rd position
// Show carsArray2 result in console
// Answer will be [ 'Honda', 'Ford', 'Suzuki', 'Nissan', 'Porsche', 'RR' ]
carsArray2.splice(2,0, 'Suzuki', 'Nissan')
console.log(carsArray2);

3. How to Remove an Item in An array using Splice Method?

// cars Array
var carsArray1 = ['Tesla', 'Toyota', 'BMW'];
var carsArray2 = ['Honda', 'Ford', 'Porsche', 'RR'];

// Remove 1 item from index 1 from carsArray1
// Removed item will be ['Toyota'] in carsArray1
// Returned items are [ 'Tesla', 'BMW' ] in carsArray1
carsArray1.splice(1,1)
console.log(carsArray1)

// Remove 2 item from index 1 from carsArray2
// Removed items will be ['Ford', 'Porsche'] in carsArray2
// Returned items are [ 'Honda', 'RR' ] in carsArray2
carsArray2.splice(1,2)
console.log(carsArray2)

4. How to Replace an Item in An array using JavaScript’s splice() Method?

Finally, let’s get to know how to Replace some elements in an array in javascript with the splice() method.

// cars Array
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford'];

// Lets replace BMW with Wagon
cars.splice(2,1, 'Wagon');

// Check the result in browser's console
// Result will be [ 'Tesla', 'Toyota', 'Wagon', 'Honda', 'Ford' ]
console.log(cars);

Conclusion

The splice() method is pretty awesome when it comes to Add, Remove or Insert the values in a JavaScript array. Javascript’s splice method works better with sorted arrays.

In this basic tutorial I tried to focus on a few things for deeper knowledge please visit Developer Mozilla Org.

If you like this tutorial you can follow me on at GitHub, Dribble or LinkedIn and don’t forget to share if you liked this article.