Array.splice() - for removing, replacing or adding values to an array
Tags: javascript
Published: 2022-05-18 07:12:31

Article Number 13 of the [Array Method Series](https://dev.to/dillionmegida/series/17614). In this article, I will explain what the `splice` Array method is.

## What is the Splice Method?

The `splice` method of arrays can remove items, replace items with new elements, and/or add new items to an array.

This method modifies the original array. It returns an array of the removed values (an empty array if no values are removed).

## Syntax of the Splice Method

```js
array.splice(start, deleteCount, ...itemsToAdd)
```

The `start` argument specifies the index that the splicing starts from.

The `deleteCount` argument specifies the number of items to be deleted from the starting position. A value of **0** means remove nothing.

The `itemsToAdd` argument, which is optional, specifies the items that will be added to the array from the starting position (whether items are removed or not).

## How to use the Splice Method

### To remove items from an array

If you want to remove items from an array with the `splice` method, specify only the `start` and `deleteCount` arguments:

```js
const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2)

console.log(array)
// [1, 4, 5]

console.log(removedItems)
// [2, 3]
```

From index 1 (where the value **2** is), the starting position, `splice` deletes **2** items (the second argument) which are **2** and **3**. The removed values are returned in an array, and the original array is modified as the values are removed.

### To replace items in an array

If you want to replace items in an array with new items, specify the `start`, `deleteCount` (specifying the number of items to replace), and a list of items to be replaced with:

```js
const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 2, 10, 11, 12)

console.log(array)
// [1, 10, 11, 12, 4, 5]

console.log(removedItems)
// [2, 3]
```

From the starting position, index 1, two items are removed and replaced with three items, as you can see in the modified array.

### To add items to an array

If you want to add items to an array with splice, specify the `start`, the `deleteCount` argument (to be 0), and also specify the list of items to be added:

```js
const array = [1, 2, 3, 4, 5]

const removedItems = array.splice(1, 0, 1000, 2000)

console.log(array)
// [1, 1000, 2000, 2, 3, 4, 5]

console.log(removedItems)
// []
```

At start position 1, no items are removed, and the added values **1000**, and **2000** are added to the array at that position.

The `removedItems` is an empty array as nothing is removed.

## Wrap Up

You can use the `splice` method of arrays to remove, replace and add items to an array. However, be careful when using it as it modifies the original array.

If it is an array that you will use in other parts of your code, I recommend cloning the array (using the [Spread operator](https://dillionmegida.com/p/rest-and-spread-operator-javascript/#spread-operator) for example) before splicing to avoid bugs later on in the app:

```js
const array = [1, 2, 3, 4, 5]

const toBeModified = [...array]

const removedItems = toBeModified.splice(1, 0, 1000)

console.log(array)
// [ 1, 2, 3, 4, 5 ]

console.log(toBeModified)
// [1, 1000, 2, 3, 4, 5]

console.log(removedItems)
// []

// use the original array later on in the code
```