JavaScript Array splice() Method

What You’ll Learn

The splice() method is the Swiss Army knife for in-place array edits: remove, insert, or replace elements at any index. It returns the removed items. This tutorial covers syntax, return values, and how it differs from slice().

Introduction

Need to delete two items from the middle, drop in three new ones, or swap a section of an array? splice() does all of that in one call. Unlike slice(), which copies a range without touching the original, splice() mutates the array you call it on.

It also returns a new array of whatever was removed—handy when you need to undo, log, or process deleted items.

Understanding the splice() Method

array.splice(start, deleteCount, item1, item2, ...) begins at start (negative values count from the end), removes deleteCount elements, then inserts any extra arguments at that position.

Omitting deleteCount removes everything from start to the end. Setting deleteCount to 0 inserts without removing.

📝 Syntax

General form of Array.prototype.splice:

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

Parameters

• start — index to begin (negative = from end).
• deleteCount — how many elements to remove (0 = insert only).
• item1, item2, ... — optional elements to insert at start.

Return value

• Array of removed elements (empty if none removed).

Common patterns

• arr.splice(2, 1) — remove one item at index 2.
• arr.splice(1, 0, "new") — insert at index 1.
• arr.splice(0, 2, "a", "b") — replace first two items.
• arr.splice(-1, 1) — remove last element.
• const copy = [...arr]; copy.splice(...) — preserve original.

Examples Gallery

Open DevTools Console (F12) or use Try-it labs. Example N maps to ?tryit=N.

const fruits = ["apple", "banana", "orange", "kiwi"];

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

console.log("removed:", removed);
// ["banana", "orange"]

console.log("fruits:", fruits);
// ["apple", "kiwi"]

removed: ["banana", "orange"]
fruits: ["apple", "kiwi"]

const fruits = ["apple", "kiwi"];

fruits.splice(1, 0, "pineapple", "peach");

console.log(fruits);
// ["apple", "pineapple", "peach", "kiwi"]

["apple", "pineapple", "peach", "kiwi"]

const fruits = ["apple", "banana", "orange", "kiwi"];

fruits.splice(1, 2, "grape", "melon");

console.log(fruits);
// ["apple", "grape", "melon", "kiwi"]

["apple", "grape", "melon", "kiwi"]

const ids = [101, 102, 103, 104];

const deleted = ids.splice(2, 1);

console.log("deleted id:", deleted[0]);
// 103

console.log("remaining:", ids);
// [101, 102, 104]

deleted id: 103
remaining: [101, 102, 104]

const stack = ["a", "b", "c"];

const last = stack.splice(-1, 1);

console.log("popped via splice:", last);
// ["c"]

console.log("stack:", stack);
// ["a", "b"]

popped via splice: ["c"]
stack: ["a", "b"]

🚀 Common Use Cases

• Delete from middle — remove a todo at index 3.
• Insert in middle — add item without rebuilding array.
• Replace block — swap a run of elements.
• Trim tail — arr.splice(5) drops from index 5 onward.
• Undo buffer — store return value before re-inserting.
• React state — prefer immutable patterns; copy then splice if needed.

📝 Notes

• Mutates the original array.
• Returns removed elements, not the updated array.
• deleteCount = 0 inserts without deleting.
• Omitting deleteCount removes through end of array.
• Negative start is supported (counts from end).
• Do not confuse with slice() (non-mutating copy).
• ES2023: toSpliced() returns a new array without mutating.

💡 Best Practices