JavaScript Array Splice Method: Complete Tutorial
Master the JavaScript splice() method for adding, removing, and replacing elements in arrays. Covers syntax, return values, insertion patterns, batch operations, and how splice compares to slice and other array methods.
The splice() method is the Swiss Army knife of array mutation in JavaScript. Unlike push(), pop(), shift(), and unshift() which only work at the ends, splice() can add, remove, or replace elements at any position within an array. It is the only built-in method that combines all three operations in a single call.
Syntax
javascriptarray.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ..., itemN)| Parameter | Type | Description |
|---|---|---|
start | Number | Index where the operation begins. Negative values count from the end |
deleteCount | Number (optional) | Number of elements to remove starting from start. Defaults to everything from start to the end |
item1...itemN | Any (optional) | Elements to insert at the start position |
Return value: An array containing the deleted elements. If no elements were deleted, returns an empty array [].
Removing Elements
Remove a Specific Number of Elements
javascriptconst colors = ["red", "orange", "yellow", "green", "blue"];
// Remove 2 elements starting at index 1
const removed = colors.splice(1, 2);
console.log(removed); // ["orange", "yellow"]
console.log(colors); // ["red", "green", "blue"]Remove Everything from an Index Onward
Omit the deleteCount parameter:
javascriptconst items = ["keep", "keep", "remove", "remove", "remove"];
const tail = items.splice(2);
console.log(tail); // ["remove", "remove", "remove"]
console.log(items); // ["keep", "keep"]Remove a Single Element by Index
javascriptconst fruits = ["apple", "banana", "cherry", "date"];
// Remove the element at index 2
fruits.splice(2, 1);
console.log(fruits); // ["apple", "banana", "date"]Remove an Element by Value
Combine indexOf() with splice():
javascriptconst tags = ["JavaScript", "Python", "Rust", "Go"];
const index = tags.indexOf("Python");
if (index !== -1) {
tags.splice(index, 1);
}
console.log(tags); // ["JavaScript", "Rust", "Go"]Always Check indexOf
indexOf() returns -1 if the value is not found. Calling splice(-1, 1) without checking would remove the last element of the array rather than doing nothing. Always guard with an if (index !== -1) check.
Inserting Elements
Set deleteCount to 0 to insert without removing anything:
javascriptconst steps = ["Plan", "Build", "Deploy"];
// Insert "Test" at index 2 (between "Build" and "Deploy")
steps.splice(2, 0, "Test");
console.log(steps); // ["Plan", "Build", "Test", "Deploy"]Insert Multiple Elements
javascriptconst letters = ["a", "d", "e"];
// Insert "b" and "c" at index 1
letters.splice(1, 0, "b", "c");
console.log(letters); // ["a", "b", "c", "d", "e"]Insert at the Beginning
javascriptconst queue = ["second", "third"];
queue.splice(0, 0, "first");
console.log(queue); // ["first", "second", "third"]
// Equivalent to unshift("first"), but splice lets you insert multiple items in the same callInsert at the End
javascriptconst list = ["a", "b"];
list.splice(list.length, 0, "c", "d");
console.log(list); // ["a", "b", "c", "d"]
// Equivalent to push("c", "d")Replacing Elements
Remove and insert in a single operation:
javascriptconst team = ["Alice", "Bob", "Carol", "Dave"];
// Replace "Bob" (index 1) with "Bobby" and "Brian"
const replaced = team.splice(1, 1, "Bobby", "Brian");
console.log(replaced); // ["Bob"]
console.log(team); // ["Alice", "Bobby", "Brian", "Carol", "Dave"]Replace a Range
javascriptconst schedule = ["Mon", "Tue", "Wed", "Thu", "Fri"];
// Replace Wed-Thu with a single "Midweek" entry
schedule.splice(2, 2, "Midweek");
console.log(schedule); // ["Mon", "Tue", "Midweek", "Fri"]Negative Start Index
Negative values count backward from the end. -1 is the last element, -2 is second-to-last:
javascriptconst nums = [10, 20, 30, 40, 50];
// Remove last 2 elements
const last2 = nums.splice(-2);
console.log(last2); // [40, 50]
console.log(nums); // [10, 20, 30]const arr = [1, 2, 3, 4, 5];
// Insert at second-to-last position
arr.splice(-1, 0, 4.5);
console.log(arr); // [1, 2, 3, 4, 4.5, 5]Practical splice() Operation Summary
| Goal | splice() call | Example result |
|---|---|---|
Remove 1 at index i | arr.splice(i, 1) | Removes arr[i] |
Remove N from index i | arr.splice(i, n) | Removes N elements |
Remove all from index i | arr.splice(i) | Removes everything from i onward |
Insert at index i | arr.splice(i, 0, x) | Inserts x before arr[i] |
Replace at index i | arr.splice(i, 1, x) | Replaces arr[i] with x |
Replace N at index i | arr.splice(i, n, ...items) | Removes N, inserts items |
Real-World Patterns
Reordering List Items (Drag and Drop)
Moving an element from one position to another:
javascriptfunction moveItem(arr, fromIndex, toIndex) {
const [item] = arr.splice(fromIndex, 1); // Remove from old position
arr.splice(toIndex, 0, item); // Insert at new position
return arr;
}
const playlist = ["Song A", "Song B", "Song C", "Song D", "Song E"];
moveItem(playlist, 4, 1); // Move "Song E" to position 1
console.log(playlist); // ["Song A", "Song E", "Song B", "Song C", "Song D"]Removing All Matching Elements
Remove every occurrence of a value:
javascriptfunction removeAll(arr, value) {
let index = arr.indexOf(value);
while (index !== -1) {
arr.splice(index, 1);
index = arr.indexOf(value);
}
return arr;
}
const data = [1, 2, 3, 2, 4, 2, 5];
removeAll(data, 2);
console.log(data); // [1, 3, 4, 5]For the immutable version, use filter():
javascriptconst data = [1, 2, 3, 2, 4, 2, 5];
const clean = data.filter(n => n !== 2);
console.log(clean); // [1, 3, 4, 5]
console.log(data); // [1, 2, 3, 2, 4, 2, 5] — unchangedInserting in Sorted Position
Maintaining a sorted array by inserting at the correct position:
javascriptfunction insertSorted(sortedArr, value) {
let insertIndex = sortedArr.findIndex(el => el > value);
if (insertIndex === -1) insertIndex = sortedArr.length;
sortedArr.splice(insertIndex, 0, value);
return sortedArr;
}
const sorted = [10, 20, 30, 40, 50];
insertSorted(sorted, 25);
console.log(sorted); // [10, 20, 25, 30, 40, 50]
insertSorted(sorted, 5);
console.log(sorted); // [5, 10, 20, 25, 30, 40, 50]
insertSorted(sorted, 60);
console.log(sorted); // [5, 10, 20, 25, 30, 40, 50, 60]Batch Replace with Validation
Replacing a section of an array with validated data:
javascriptfunction updateSection(items, startIndex, newItems) {
if (startIndex < 0 || startIndex >= items.length) {
throw new RangeError(`Start index ${startIndex} is out of bounds`);
}
const validItems = newItems.filter(item => item != null && item !== "");
if (validItems.length === 0) {
console.warn("No valid items to insert");
return [];
}
return items.splice(startIndex, validItems.length, ...validItems);
}
const inventory = ["Widget A", "Widget B", "Widget C", "Widget D"];
const replaced = updateSection(inventory, 1, ["Widget X", "Widget Y"]);
console.log(replaced); // ["Widget B", "Widget C"]
console.log(inventory); // ["Widget A", "Widget X", "Widget Y", "Widget D"]splice() vs slice() Quick Reference
This is one of the most confused pairs in JavaScript. For a detailed breakdown, see the full slice vs splice comparison.
| Feature | splice() | slice() |
|---|---|---|
| Mutates original | Yes | No |
| Purpose | Add, remove, replace in place | Extract a portion into new array |
| Returns | Array of removed elements | New array with extracted elements |
| Second parameter | Delete count | End index (exclusive) |
| Inserts elements | Yes (3rd+ parameters) | No |
Performance Considerations
splice() has different performance characteristics depending on where it operates:
| Operation | Position | Time complexity |
|---|---|---|
| Remove from end | splice(-1, 1) | O(1) |
| Remove from start | splice(0, 1) | O(n) |
| Remove from middle | splice(mid, 1) | O(n) |
| Insert at end | splice(length, 0, x) | O(1) |
| Insert at start | splice(0, 0, x) | O(n) |
| Insert at middle | splice(mid, 0, x) | O(n) |
Any operation that affects the beginning or middle forces the engine to re-index all subsequent elements.
Splice in Loops
Avoid calling splice() inside a forward-iterating loop. Each removal shifts indices, causing you to skip elements. Either iterate backward, accumulate indices and remove in reverse, or use filter() for removal by condition.
Common Mistakes
Confusing splice() with slice():
javascriptconst arr = [1, 2, 3, 4, 5];
// Developer wanted a copy of elements 1-3 (non-destructive)
const result = arr.splice(1, 3); // Oops: mutated the array!
console.log(arr); // [1, 5]
console.log(result); // [2, 3, 4]
// Should have used slice()
// const result = arr.slice(1, 4);Splicing during forward iteration:
javascript// Bug: skips elements after removal
const numbers = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
numbers.splice(i, 1);
// After removing index 1 (value 2), value 3 shifts to index 1
// but i increments to 2, skipping 3
}
}
console.log(numbers); // [1, 3, 5] — works by luck, but unreliable
// Fix: iterate backward
const nums = [1, 2, 3, 4, 5, 6];
for (let i = nums.length - 1; i >= 0; i--) {
if (nums[i] % 2 === 0) {
nums.splice(i, 1);
}
}
console.log(nums); // [1, 3, 5] — correctForgetting deleteCount (removes everything):
javascriptconst arr = [1, 2, 3, 4, 5];
// Bug: developer wanted to insert at index 2, forgot deleteCount
arr.splice(2, "new"); // "new" coerces to NaN, treated as 0 — nothing is deleted
// The safe way: always specify deleteCount explicitly
arr.splice(2, 0, "new"); // Insert "new" at index 2, delete nothing
Rune AI
Key Insights
- Three-in-one method:
splice()removes, inserts, and replaces elements at any array position - Mutates the original: Always modifies the array in place; returns an array of removed elements
- Second parameter is a count:
splice(2, 3)removes 3 elements starting at index 2 (not "up to index 3") - Insert pattern:
splice(index, 0, ...items)inserts without removing by setting deleteCount to 0 - Loop safety: Never splice in a forward loop; iterate backward or use
filter()for condition-based removal
Frequently Asked Questions
Does splice() return the modified array?
How do I remove an element by value instead of by index?
What happens if deleteCount is 0?
Can splice() add and remove at the same time?
Is splice() or filter() better for removing elements?
Conclusion
The splice() method handles every in-place array modification scenario: removing elements by index, inserting at any position, and replacing sections in a single call. Its versatility makes it indispensable for drag-and-drop reordering, sorted insertions, and batch updates. The essential details to remember are that it mutates the original array, the second parameter is a count (not an end index like slice), and forward-loop splicing skips elements. When mutation is unacceptable, prefer filter() for removals and spread syntax for insertions.
More in this topic
OffscreenCanvas API in JS for UI Performance
Master the OffscreenCanvas API to offload rendering from the main thread. Covers worker-based 2D and WebGL rendering, animation loops inside workers, bitmap transfer, double buffering, chart rendering pipelines, image processing, and performance measurement strategies.
Advanced Web Workers for High Performance JS
Master Web Workers for truly parallel JavaScript execution. Covers dedicated and shared workers, structured cloning, transferable objects, SharedArrayBuffer with Atomics, worker pools, task scheduling, Comlink RPC patterns, module workers, and performance profiling strategies.
JavaScript Macros and Abstract Code Generation
Master JavaScript code generation techniques for compile-time and runtime metaprogramming. Covers AST manipulation, Babel plugin authorship, tagged template literals as macros, code generation pipelines, source-to-source transformation, compile-time evaluation, and safe eval alternatives.