Using Splice in JavaScript

Arrays in Javascript are fascinating. Unlike other languages, JavaScript lets you store elements of any type. What this really means is you can create an element in an array that could be a string, number, boolean or even a function.

const Arr = ["Banana", 23, false, function(name){console.log(name) }] is a perfectly valid array in JavaScript. JavaScript provides us with some built-in methods which can be used for mutations and iterations. We're going to explore the Splice method.

Splice lets you insert, delete or replace an element in an array. Splice mutates the original array that we perform an operation on and will return the array of deleted elements. It returns an empty array in case nothing is deleted. It can be incredibly powerful when working with real projects

syntax -

arrayName.splice(start-from, delete-count (optional) ,replace-with (optional) )

start-count - We need at least one parameter to perform the operation. This parameter will tell the splice method at which index do we need to start.

delete-count - This is an optional parameter. We can use this parameter to pass the count of how many elements we want to delete from the array.

replace-with - This is another optional parameter here which we can use to replace the element.

Let's understand this with examples

Removing elements in an array

const myArr = ["Apple", "Mango", "Banana", "Potato", "Melon"];

//will remove the starting from index 2
const deletedItems = myArr.splice(2); 

console.log(myArr); 
//output -  [ 'Apple', 'Mango' ]

console.log(deletedItems); 
//output- [ 'Banana', 'Potato', 'Melon' ]

In the above example, we have passed 2 as a parameter which will be our start index. The slice method will remove all elements starting from the index 2 to the very end. The slice method will return the elements that are deleted from the array. Similarly, we can see that the items from the original array are deleted.

Removing elements with a specific count

const myArr = ["Apple", "Mango", "Banana", "Potato", "Melon"];

myArr.splice(2,2); 

console.log(myArr); 

// output - [ 'Apple', 'Mango', 'Melon' ]

In the above example, We have mentioned two parameters in the splice method. The first parameter specifies the start index as mentioned above, the second parameter specifies how many elements we need to delete from the start index.

Replacing an element in an array

const myArr = ["Apple", "Mango", "Banana", "Potato", "Melon"];

myArr.splice(2, 1, "Tomato");

console.log(myArr);

// output - [ 'Apple', 'Mango', 'Tomato', 'Potato', 'Melon' ]

In the above code, we have mentioned how many elements we need to remove but at the same time, we are adding another parameter that includes the value we want to replace the deleted element with ( refer to the syntax above). Since Banana is located at our start index 2, it will be replaced with Tomato

Adding an element without deleting

const myArr = ["Apple", "Mango", "Banana", "Potato", "Melon"];

myArr.splice(2, 0, "Tomato");

console.log(myArr);

// output - [ 'Apple', 'Mango', 'Tomato', 'Banana', 'Potato', 'Melon' ]

An interesting thing about splice is you can add an element to an array without really deleting anything by just passing0 at the delete-count parameter. When we pass a 0, the splice method will add the element at the start index and shift all elements to its right-hand side.

The End!

Thank you for reading. There are multiple interesting applications of how splice can be used in real projects. Keep exploring with different examples. Cheers!