JavaScript Array splice() method

The JavaScript array splice() method is used to add/remove the elements to/from the existing array.

The splice() method overwrites the original array.

This method modifies the original array and returns the removed elements as a new array.

The splice() method is a built-in method for JavaScript Array objects.

In this tutorial, you will learn how you can remove, add, or replace elements of an array using the splice() method.

Syntax

array.splice(start,delete,element1,element2,?,elementN)  

Parameters

start – It represents the index from where the method start to extract the elements. This is the position to add/remove items. Negative value defines the position from the end of the array.

delete – It is optional. It represents the number of elements to be removed.

element1,element2,…,elementN – It is optional. It represent the elements to be inserted.

Return Value

An array containing the removed items (if any).

If no elements are removed, an empty array is returned.

If only one element is removed, an array of one element is returned.

Example

Below are the examples of Array splice() method. 

let prime_numbers = [2, 3, 5, 7, 9, 11];

// replace 1 element from index 4 by 13
let removedElement = prime_numbers.splice(4, 1, 13);
console.log(removedElement);
console.log(prime_numbers);

// Output: [ 9 ]
//         [ 2, 3, 5, 7, 13, 11 ]

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"]

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum')

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

let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2, 0, 'drum', 'guitar')

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

//Remove 1 element at index 3
let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon']
let removed = myFish.splice(3, 1)

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

//Remove 1 element at index 2, and insert "trumpet"
let myFish = ['angel', 'clown', 'drum', 'sturgeon']
let removed = myFish.splice(2, 1, 'trumpet')

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

//Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"
let myFish = ['angel', 'clown', 'trumpet', 'sturgeon']
let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue')

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

//Remove 2 elements, starting from index 2
let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']
let removed = myFish.splice(2, 2)

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

//Remove 1 element from index -2
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(-2, 1)

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

//Remove all elements, starting from index 2
let myFish = ['angel', 'clown', 'mandarin', 'sturgeon']
let removed = myFish.splice(2)

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

let languages = ["JavaScript", "Python", "Java", "Lua"];

// replacing "Java" & "Lua" with "C" & "C++"
let removed = languages.splice(2, 2, "C", "C++");
console.log(removed); // [ 'Java', 'Lua' ]
console.log(languages); // [ 'JavaScript', 'Python', 'C', 'C++' ]

// adding elements without deleting existing elements
let removed1 = languages.splice(1, 0, "Java", "Lua");
console.log(removed1); // []
console.log(languages); // [ 'JavaScript', 'Java', 'Lua', 'Python', 'C', 'C++' ]

// removing 3 elements
let removed2 = languages.splice(2, 3);
console.log(removed2); // [ 'Lua', 'Python', 'C' ]
console.log(languages); // [ 'JavaScript', 'Java', 'C++' ]

let languages = ["JavaScript", "Python", "Java", "Lua"];

// does not removes, only appends to the end
let removed = languages.splice(5, 2, "C++");
console.log(removed); // []
console.log(languages); // ["JavaScript", "Python", "Java", "Lua", "C++"]

// remove last element and add 3 more elements
let removed1 = languages.splice(-1, 1, "Swift", "Scala", "Go");
console.log(removed1); // [ "C++" ]
console.log(languages); // ["JavaScript", "Python", "Java", "Lua", "Swift", "Scala", "Go"]

let languages = ["JavaScript", "Python", "Java", "Lua"];

// removes everything from start
let removed = languages.splice(1);
console.log(removed); // [ "Python", "Java", "Lua" ]
console.log(languages); // [ "JavaScript" ]

// remove none & add 3 more element
let removed1 = languages.splice(1, -2, "Swift", "Scala", "Go");
console.log(removed1); // [ ]
console.log(languages); // [ "JavaScript", "Swift", "Scala", "Go" ]