The Most Powerful Array Method : Splice
Published: 2022-08-11 17:39:00

Splice is one of the most powerful methods of Array. We can achieve following things using splice method :

- Remove element/s from a specified index of an array
- Replace element/s from an array ( **Remove + Insert** )
- Insert element/s to an array

In short, splice method mutates the original array.


Take a look at syntax :

```
splice(start, deleteCount, item1, item2, itemN)

Note : Except start all others are optional )
```
To understand this we will directly jump into examples.

## Removing Elements from an Array

**Example - 1**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(2);
console.log(' result - 1 ', numbers);   // [1, 2]
```

- What splice method does here is it removes all the other elements from the specified index ( i.e start as specified in syntax )

- Now there are four possibilities : start - index might be +ve , -ve , zero , index out of bound 

**Example - 2**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(0);
console.log(' result - 1 ', numbers);   // []
```

- Basically splice method removes all the elements from index 0.
- That means ultimately it removes all the elements from the array.
- We can conclude that we can **<u>empty the array</u>** using splice method.

**Example - 3**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(-2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7]
```

- When start index is specified -ve then splice method removes all the elements from the end of that array.

**Example - 4**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(20);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 4, 5, 6, 7, 8, 9];
```

- When start index is specified greater than or equal to length of the array then no element is removed.

---
## Removing N no. of Elements from an Array


```
splice(start, deleteCount)
```
- Now along with the index from where we can start removing elements, we can specify exactly how many elements can be removed with the **deleteCount** as specified in the syntax.
- Note that it's an **optional**. 
- Now we will take a look at the examples so that we can get an idea of it

**Example - 5**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2);
console.log(' result - 1 ', numbers);   // [1, 2, 3, 6, 7, 8, 9]
```

- Here in the above example splice method will start removing 2 elements (2 - deletecount) from the start index i.e 3

---
## Replacing Elements from an Array


```
splice(start, deleteCount, item1, item2, itemN)
```
- We can replace the elements from an array i.e inserting and removing the elements simultaneously.
- Take a look at following example you can clearly understand this


**Example - 6**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,2, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 6, 7, 8, 9]
```

- Here, in the above example from index 3 ( i.e start - 3 ), 2 elements ( i.e delete count - 2 and elements : 3 & 4 ) are removed and "a", "b" and "c" are added. 

---
## Inserting Elements into an Array

- This can be easily achieved by keeping **delete count 0**

**Example - 7**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
numbers.splice(3,0, "a", "b", "c");
console.log(' result - 1 ', numbers);   // [1, 2, 3, 'a', 'b', 'c', 4, 5, 6, 7, 8, 9]
```
I suppose this example doesn't need an explanation if you have gone through previous example.

---

## Return value

- Sometimes we need to keep track of exactly which are the elements are removed.
- When we splice on an array then, it returns an array of deleted elements.
- Take a look at this example : 

**Example - 8**

```
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let deletedArray = numbers.splice(3,2);
console.log( " -- deleted arr --- ", deletedArray); // [4, 5]
``` 
- Take a note of it, if no element is removed from an array then **empty array** is returned

Thank you for stopping by!. If you find it useful consider sharing it. You can connect with me here : [Linkedin](https://www.linkedin.com/in/swasdev4511/)