JavaScript Array splice()

splice() changes an array at a chosen index. It can remove elements, insert new elements, or replace existing elements, and it returns an array containing the elements that were removed.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
const removed = scripts.splice(2, 2, "VBScript", "Perl");

console.log(scripts); // ["PHP", "ASP", "VBScript", "Perl"]
console.log(removed); // ["JavaScript", "HTML"]

JavaScript splice() Syntax and Parameters Top ↑

array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2)

Array indexes and array length determine where positional changes happen. start selects the index to change. deleteCount controls how many existing elements are removed. Any additional arguments are inserted beginning at start.

Replacing Array Elements with splice() Top ↑

The original page replaced two items beginning at index 2:

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
scripts.splice(2, 2, "VBScript", "Perl");
console.log(scripts); // ["PHP", "ASP", "VBScript", "Perl"]

Two elements were removed and two new elements were inserted, so the final length stayed the same.

Adding New Elements Without Removing Any Top ↑

Use a deleteCount of 0 to insert without removing.

const scripts = ["PHP", "ASP"];
scripts.splice(2, 0, "VBScript", "Perl");
console.log(scripts); // ["PHP", "ASP", "VBScript", "Perl"]

Adding Elements at the End with splice() Top ↑

The original page demonstrated using array.length as the insertion index:

const scripts = ["PHP", "ASP"];
scripts.splice(scripts.length, 0, "JavaScript", "HTML");
console.log(scripts);

For ordinary appending, push() is usually simpler.

Adding Elements at the Beginning with splice() Top ↑

const scripts = ["JavaScript", "HTML"];
scripts.splice(0, 0, "PHP", "ASP");
console.log(scripts); // ["PHP", "ASP", "JavaScript", "HTML"]

For ordinary insertion at index 0, unshift() directly expresses the intention.

Removing Elements with splice() Top ↑

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
scripts.splice(1, 1);
console.log(scripts); // ["PHP", "JavaScript", "HTML"]

To remove two elements starting at index 1:

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
scripts.splice(1, 2);
console.log(scripts); // ["PHP", "HTML"]

If you call splice(start) without deleteCount, all elements from start to the end are removed.

const values = [10, 20, 30, 40, 50];
values.splice(2);
console.log(values); // [10, 20]

splice() Returns the Removed Elements Top ↑

const values = ["a", "b", "c", "d"];
const removed = values.splice(1, 2);

console.log(removed); // ["b", "c"]
console.log(values);  // ["a", "d"]

When nothing is removed, the returned array is empty.

Using a Negative start Index Top ↑

A negative start counts from the end of the array.

const values = ["a", "b", "c", "d"];
values.splice(-2, 1, "X");
console.log(values); // ["a", "b", "X", "d"]

Removing an Array Element by Its Value Top ↑

Combine indexOf() with splice(), but always guard against a -1 result.

const scripts = ["PHP", "ASP", "JavaScript", "HTML"];
const index = scripts.indexOf("ASP");

if (index !== -1) {
  scripts.splice(index, 1);
}

console.log(scripts); // ["PHP", "JavaScript", "HTML"]

Removing Multiple Matching Values Top ↑

If the goal is to remove every element matching a condition and you do not need to mutate the original array, filter() is often clearer.

const values = [1, 2, 2, 3, 2, 4];
const withoutTwos = values.filter((value) => value !== 2);

console.log(values);      // [1, 2, 2, 3, 2, 4]
console.log(withoutTwos); // [1, 3, 4]

Non-Mutating Alternative: toSpliced() Top ↑

const original = ["a", "b", "c", "d"];
const updated = original.toSpliced(1, 2, "X", "Y");

console.log(original); // ["a", "b", "c", "d"]
console.log(updated);  // ["a", "X", "Y", "d"]

toSpliced() follows the same general positional idea but returns a new array rather than modifying the source.

splice() vs slice() Top ↑

Interactive splice() Add and Remove Demo Top ↑

Open splice() Add/Remove Demo

Common splice() Mistakes Top ↑

• Confusing splice() with slice().
• Forgetting that splice() mutates the original array.
• Forgetting deleteCount = 0 when inserting without removing.
• Passing an unsuccessful indexOf() result of -1 directly to splice().
• Ignoring the useful returned array of removed values.
• Using splice() when a clearer method such as push(), unshift(), or non-mutating filter() better expresses the task.

Empty an Array → ← Array Reference Display Array Elements →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: