DEV Community 👩‍💻👨‍💻

Cover image for Array.splice() - for removing, replacing or adding values to an array
Dillion Megida
Dillion Megida

Posted on

Array.splice() - for removing, replacing or adding values to an array

Article Number 13 of the Array Method Series. 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

array.splice(start, deleteCount, ...itemsToAdd)
Enter fullscreen mode Exit fullscreen mode

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:

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

const removedItems = array.splice(1, 2)

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

console.log(removedItems)
// [2, 3]
Enter fullscreen mode Exit fullscreen mode

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:

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]
Enter fullscreen mode Exit fullscreen mode

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:

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)
// []
Enter fullscreen mode Exit fullscreen mode

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 for example) before splicing to avoid bugs later on in the app:

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.