JavaScript Reference
Array.prototype.splice()
Add, remove, or replace elements in place. Returns the removed elements.
Last updated: October 2026
Definition: Array.prototype.splice() mutates the original array by removing or replacing existing elements and/or inserting new ones. It returns an array of removed elements. If nothing was removed, it returns [].
🎬 Live Example
Five splice operations. Click any button to see the output.
💡 splice is destructive — the original array is modified.
Basic Syntax
array.splice(start, deleteCount, item1, item2, ...)
// start — index to begin changes
// deleteCount — how many to remove (optional)
// item1..itemN — elements to insert (optional)Returns an array of removed elements. Mutates the original array.
🎯 Syntax & Parameters
| Parameter | Type | Description |
|---|---|---|
start | number | Index to start. Negative counts from end. |
deleteCount | number | How many to remove. Omit to remove all after start. |
itemN | any | Elements to insert at start. |
Remove Elements
const arr = ['a', 'b', 'c', 'd', 'e'];
const removed = arr.splice(1, 2);
// removed: ['b', 'c']
// arr: ['a', 'd', 'e']Insert Without Removing
const arr = ['a', 'b', 'c'];
arr.splice(1, 0, 'X', 'Y');
// arr: ['a', 'X', 'Y', 'b', 'c']Pro tip: Always pass 0 as deleteCount when inserting. Omitting it removes everything after start.
Replace Elements
const arr = ['a', 'b', 'c', 'd'];
arr.splice(1, 2, 'X');
// arr: ['a', 'X', 'd']
// Replace one with multiple
const arr2 = ['a', 'b', 'c'];
arr2.splice(1, 1, 'X', 'Y', 'Z');
// arr2: ['a', 'X', 'Y', 'Z', 'c']Remove from End with Negative Index
const arr = [1, 2, 3, 4, 5];
arr.splice(-1, 1);
// arr: [1, 2, 3, 4]
arr.splice(-2, 2);
// removes last twoReal-World: Remove Item from Todo List
let todos = [
{ id: 1, text: 'Buy milk' },
{ id: 2, text: 'Walk dog' },
{ id: 3, text: 'Read book' }
];
const index = todos.findIndex(t => t.id === 2);
if (index !== -1) {
todos.splice(index, 1);
}
// todos: [{id:1,...}, {id:3,...}]Common React/Vue anti-pattern — prefer immutable filter for state updates.
🎯 splice vs slice vs toSpliced
| Method | Mutates? | Use when |
|---|---|---|
splice | Yes | Editing arrays in place |
slice | No | Copying a portion |
toSpliced | No | Immutable splice (ES2023+, modern browsers) |
⚠️ Common Mistakes
- Omitting deleteCount when inserting.
splice(1, 'X')removes everything from index 1 onward. Always pass0for pure inserts. - Assuming splice returns the modified array. It returns the removed elements.
- Using splice in React state directly. React won't detect the mutation. Use
filter,slice, or spread instead. - Looping with splice. Removing while iterating skips elements — iterate backwards.
- Confusing with slice. slice = copy, splice = mutate.
- Using splice for single push/pop.
push,pop,shift,unshiftare clearer.
❓ Frequently Asked Questions
What does Array.splice() do in JavaScript?
Array.splice() changes the contents of an array by removing, replacing, or adding elements in place. It returns an array of the removed elements and mutates the original array.
What is the difference between splice and slice?
splice mutates the original array and returns removed elements. slice returns a copy of a portion without modifying the original. Use splice for in-place edits, slice for non-destructive reads.
How do I insert without removing in splice?
Pass 0 as the deleteCount: arr.splice(index, 0, newItem). This inserts newItem at index without removing anything.
How do I remove the last element with splice?
Use arr.splice(-1, 1) to remove the last element, or arr.splice(arr.length - 1, 1). For simple removal, pop() is cleaner.
Does splice return the removed elements?
Yes. splice returns an array of the removed elements. If nothing was removed, it returns an empty array.