1. Overview

The splice() method modifies an array directly by adding, removing, or replacing elements at specific positions.

The splice() method is a mutating method. It may change the content of this. If the specified number of elements to insert differs from the number of elements being removed, the array’s length will be changed as well. At the same time, it uses [Symbol.species] to create a new array instance to be returned.

2. Syntax

splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item1)
splice(start, deleteCount, item1, item2)
splice(start, deleteCount, item1, item2, /* …, */ itemN)

Parameters

• start: Zero-based index at which to start changing the array, converted to an integer. Negative index counts back from the end of the array.
• deleteCount: An integer indicating the number of elements in the array to remove from start. If deleteCount is omitted, or if its value is greater than or equal to the number of elements after the position specified by start, then all the elements from start to the end of the array will be deleted. If deleteCount is 0 or negative, no elements are removed.
• item1, …, itemN: The elements to add to the array, beginning from start.

Return value

• An array containing the deleted elements.
• If only one element is removed, an array of one element is returned.
• If no elements are removed, an empty array is returned.

3. Example

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]

4. What is the difference between slice and splice

5. Remove 0 (zero) elements before index 2, and insert “drum”

const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum");

// myFish is ["angel", "clown", "drum", "mandarin", "sturgeon"]
// removed is [], no elements removed

6. Remove 0 (zero) elements before index 2, and insert “drum” and “guitar”

const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2, 0, "drum", "guitar");

// myFish is ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// removed is [], no elements removed

7. Remove 0 (zero) elements at index 0, and insert “angel”

splice(0, 0, …elements) inserts elements at the start of the array like unshift().

const myFish = ["clown", "mandarin", "sturgeon"];
const removed = myFish.splice(0, 0, "angel");

// myFish is ["angel", "clown", "mandarin", "sturgeon"]
// no items removed

8. Remove 0 (zero) elements at last index, and insert “sturgeon”

splice(array.length, 0, …elements) inserts elements at the end of the array like push().

const myFish = ["angel", "clown", "mandarin"];
const removed = myFish.splice(myFish.length, 0, "sturgeon");

// myFish is ["angel", "clown", "mandarin", "sturgeon"]
// no items removed

9. Remove 1 element at index 3

const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
const removed = myFish.splice(3, 1);

// myFish is ["angel", "clown", "drum", "sturgeon"]
// removed is ["mandarin"]

10. Remove 1 element at index 2, and insert “trumpet”

const myFish = ["angel", "clown", "drum", "sturgeon"];
const removed = myFish.splice(2, 1, "trumpet");

// myFish is ["angel", "clown", "trumpet", "sturgeon"]
// removed is ["drum"]

11. Remove 2 elements from index 0, and insert “parrot”, “anemone” and “blue”

const myFish = ["angel", "clown", "trumpet", "sturgeon"];
const removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish is ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed is ["angel", "clown"]

12. Remove 2 elements, starting from index 2

const myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"];
const removed = myFish.splice(2, 2);

// myFish is ["parrot", "anemone", "sturgeon"]
// removed is ["blue", "trumpet"]

13. Remove 1 element from index -2

const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(-2, 1);

// myFish is ["angel", "clown", "sturgeon"]
// removed is ["mandarin"]

14. Remove all elements, starting from index 2

const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2);

// myFish is ["angel", "clown"]
// removed is ["mandarin", "sturgeon"]

15. Using splice() on sparse arrays

The splice() method preserves the array’s sparseness.

const arr = [1, , 3, 4, , 6];
console.log(arr.splice(1, 2)); // [empty, 3]
console.log(arr); // [1, 4, empty, 6]

16. Calling splice() on non-array objects

The splice() method reads the length property of this. It then updates the integer-keyed properties and the length property as needed.

const arrayLike = {
  length: 3,
  unrelated: "foo",
  0: 5,
  2: 4,
};
console.log(Array.prototype.splice.call(arrayLike, 0, 1, 2, 3));
// [ 5 ]
console.log(arrayLike);
// { '0': 2, '1': 3, '3': 4, length: 4, unrelated: 'foo' }