Table of Contents

 

JavaScript Array splice() Method lets you add, remove, or replace elements at any position in an array. It changes the original array, so it is useful when you want to update a list in place. The method also returns the elements it removes, which makes it possible to keep, inspect, or move those values elsewhere.

This guide explains the syntax, parameters, return value, negative indexes, common insertion and deletion patterns, and how splice() differs from slice() and push().

Syntax

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

start is the position where the change begins. deleteCount is how many existing elements to remove. Any values after those arguments are inserted at the same position. The insertion arguments are optional.

For example, this removes two values beginning at index 1 and puts two new values in their place:

const letters = ["a", "b", "c", "d", "e"];

const removed = letters.splice(1, 2, "x", "y");

console.log(letters); // ["a", "x", "y", "d", "e"]
console.log(removed); // ["b", "c"]

Array indexes start at 0, so index 1 refers to the second element. The original array now contains the replacement values; removed holds the elements that were taken out.

Understanding the arguments

The start index

A non-negative start counts from the beginning of the array. If it is greater than the array’s length, JavaScript treats it as the end of the array. A negative value counts backward from the end: -1 means the last element, -2 the second-to-last, and so on. If a negative value goes past the beginning, it is treated as index 0.

const colors = ["red", "green", "blue", "gold"];

colors.splice(-2, 1); // removes "blue"
console.log(colors);  // ["red", "green", "gold"]

Negative positions are handy when the target is near the end and you do not want to calculate an index from array.length.

The delete count

deleteCount tells splice() how many elements to remove, starting at start. A count of 0 removes nothing. A positive count removes up to that many elements, stopping at the end of the array if necessary. If the argument is omitted, every element from start through the end is removed.

Be careful: omitting deleteCount is different from passing 0. If you want to insert without deleting, include 0 explicitly.

const numbers = [10, 20, 30, 40, 50];

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

When deleteCount is supplied, negative values behave like 0: no elements are deleted. You can still insert values in that case.

Deleting elements

To delete one element, pass its index and a delete count of 1. To remove several consecutive elements, increase the count. If values may repeat, decide whether to remove one occurrence or all of them; these are different operations and should be explicit.

const fruits = ["Apple", "Banana", "Mango", "Orange", "Grapes"];

const removed = fruits.splice(1, 2);

console.log(fruits);  // ["Apple", "Orange", "Grapes"]
console.log(removed); // ["Banana", "Mango"]

The first call argument, 1, points to “Banana”; the count of 2 removes it and the next element. The returned array preserves the removed values’ order. If no values are removed, the return value is an empty array.

To remove just the first item, use items.splice(0, 1). To remove the last item, items.splice(items.length - 1, 1) works, though pop() is clearer when the last value is all you need. Similarly, shift() removes and returns the first item.

Calling splice() without assigning its return value is fine if you only care about changing the original array:

const tasks = ["draft", "review", "publish"];
tasks.splice(1, 1);
console.log(tasks); // ["draft", "publish"]

Remove an item by value

If you know a value but not its position, find its index first. Check that the result is not -1 before passing it to splice(): a negative start counts from the end, so an unchecked missing value could remove the last item instead.

const colors = ["red", "green", "blue"];
const index = colors.indexOf("green");

if (index !== -1) {
  colors.splice(index, 1);
}
console.log(colors); // ["red", "blue"]

indexOf() finds the first matching primitive value, so this removes only its first occurrence. For objects, it checks whether the exact same object reference is present; to match by a property, use findIndex() with a condition. If several values match a rule, filter() is often the clearest way to create a new array without them. When you must mutate the existing array, remove matching entries from the end toward the beginning so earlier indexes remain valid as later entries disappear.

Inserting elements

To insert one or more values without removing anything, pass a start position, 0, and the values to insert. Existing elements at that position move to make room.

const weekdays = ["Monday", "Wednesday", "Thursday"];

weekdays.splice(1, 0, "Tuesday");
console.log(weekdays);
// ["Monday", "Tuesday", "Wednesday", "Thursday"]

To insert at the beginning, use splice(0, 0, item). To insert at the end, use splice(array.length, 0, item). You can provide multiple items, and they appear in the order written:

const queue = ["Sam", "Lee"];
queue.splice(1, 0, "Ari", "Noor");
console.log(queue); // ["Sam", "Ari", "Noor", "Lee"]

For a simple append, push() is usually clearer and typically more efficient:

const values = [1, 2];
values.push(3);                 // append
values.splice(values.length, 0, 4); // also appends
console.log(values); // [1, 2, 3, 4]

Use splice() when the insertion position matters; use push() when you simply want to add to the end.

Replacing elements

Replacement combines deletion and insertion. Set deleteCount to the number of old values to remove, then list the new values. The number removed and inserted does not have to match; the array becomes shorter or longer when the counts differ.

const menu = ["soup", "salad", "pasta", "cake"];

const oldItems = menu.splice(1, 2, "rice bowl");

console.log(menu);    // ["soup", "rice bowl", "cake"]
console.log(oldItems); // ["salad", "pasta"]

To replace exactly one element, use a count of 1 and one replacement value. To replace several with several, pass each replacement after the delete count. To delete and insert at the same location, the same pattern applies.

Return value and mutation

splice() returns a new array containing the removed elements, not the updated array. If nothing is removed, it returns [], including when it is used only to insert. Meanwhile, the array on which you called it is modified. This is an important difference from methods that create a changed copy instead of altering the original.

const original = ["a", "b", "c"];
const removed = original.splice(1, 1, "x");

console.log(original); // ["a", "x", "c"]
console.log(removed);  // ["b"]

If you need to keep the original unchanged, make a copy first, for example with const copy = [...original], and call splice() on the copy.

splice() with Frozen and Sealed Arrays

Frozen arrays reject splice() with a TypeError in strict mode. Sealed arrays also reject it because element removal requires deletion, though insertion that only writes to existing indices works—splice() engages property deletion, so sealed arrays fail when removing:

javascript
"use strict";

const frozen = Object.freeze([1, 2, 3]);
try {
  frozen.splice(0, 1);
} catch (e) {
  console.log(e.constructor.name);   // "TypeError"
}

const sealed = Object.seal([1, 2, 3]);
try {
  sealed.splice(0, 1);
} catch (e) {
  console.log(e.constructor.name);   // "TypeError"
}

splice() and Typed Arrays

Typed arrays do not expose splice() on their prototypes, and Array.prototype.splice cannot be applied because length is read-only and elements cannot be relocated. Use subarray and manual reconstruction:

javascript
const typed = new Uint8Array([1, 2, 3, 4, 5]);
const withoutMiddle = new Uint8Array([
  ...typed.subarray(0, 2),
  ...typed.subarray(3)
]);
console.log(withoutMiddle);   // Uint8Array [1, 2, 4, 5]

splice() vs. slice()

The names are similar, but their behavior is different. splice() changes an array and can insert, remove, or replace values. slice() returns a shallow copy of a selected range and leaves the original alone. Its end index is exclusive, and it does not accept insertion values.

const letters = ["a", "b", "c", "d"];

const part = letters.slice(1, 3);
console.log(part);    // ["b", "c"]
console.log(letters); // ["a", "b", "c", "d"]

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

Use slice() to copy a range; use splice() to edit the array itself.