JavaScript Array splice() Cheatsheet
āļø JavaScript Array splice() Cheatsheet
splice() modifies an array in place by adding, removing, or replacing elements at any index.
ā Basic syntax ā Removing elements ā Adding elements ā Replacing elements ā Return value ā splice() vs slice()
#javascript #arrays #splice #slice #mutate #webdev #frontend #coding #tips
Basic syntax
splice() modifies (add/remove/replace elements) an array in place, and returns an array of the removed elements. If no element are removed, an empty array will be returned.
array.splice(start, deleteCount, item1, item2, ...);| Parameter | Description |
|---|---|
start | Index at which to start changing the array. |
deleteCount | Number of elements to remove. Use 0 to add only. |
item1, ... | Elements to add at the start index. Optional. |
Removing elements
Remove elements from the middle of an array. Provide the start index (start) and the number of elements to remove (deleteCount).
const arr = ["a", "b", "c", "d"];
// Remove 2 elements starting from index 1
const removed = arr.splice(1, 2);
console.log(arr); // ["a", "d"]
console.log(removed); // ["b", "c"]Remove the last element.
const nums = [1, 2, 3, 4];
nums.splice(-1, 1);
console.log(nums); // [1, 2, 3]Adding elements
Insert elements without removing any. Provide the start index (start) and the elements to add, set deleteCount to 0.
const colors = ["red", "blue"];
colors.splice(1, 0, "green", "yellow");
console.log(colors); // ["red", "green", "yellow", "blue"]Add at the beginning.
const nums = [2, 3];
nums.splice(0, 0, 1);
console.log(nums); // [1, 2, 3]Add at the end.
const nums = [1, 2];
nums.splice(nums.length, 0, 3);
console.log(nums); // [1, 2, 3]Replacing elements
Remove existing elements and insert new ones.
Provide the start index (start), the number of elements to remove (deleteCount), and the new elements to add.
const items = ["pen", "pencil", "eraser"];
items.splice(1, 1, "marker");
console.log(items); // ["pen", "marker", "eraser"]Replace multiple elements.
const scores = [10, 20, 30, 40];
scores.splice(1, 2, 25, 35);
console.log(scores); // [10, 25, 35, 40]Return value
splice() returns an array containing the removed elements.
const arr = ["a", "b", "c"];
const removed = arr.splice(1, 1);
console.log(removed); // ["b"]
console.log(arr); // ["a", "c"]If no elements are removed, it returns an empty array.
const arr = ["a", "b"];
const removed = arr.splice(1, 0, "x");
console.log(removed); // []
console.log(arr); // ["a", "x", "b"]splice() vs slice()
splice() and slice() sound similar, but they do very different things.
| Method | Mutates original | Returns |
|---|---|---|
splice() | Yes | Array of removed elements |
slice() | No | New array with selected elements |
const arr = [1, 2, 3, 4];
const spliced = arr.splice(1, 2);
console.log(arr); // [1, 4]
console.log(spliced); // [2, 3]
const sliced = arr.slice(0, 1);
console.log(arr); // [1, 4]
console.log(sliced); // [1]Full-Stack AI Developer Roadmap
From HTML & CSS to working with AI models, all in one structured roadmap.