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)
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]
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]
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)
// []
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
Top comments (0)