Table of Contents
What splice() Does
Removes items: you pick where to start and how many to take out.
Adds items: you can drop new ones in at any position.
Replaces items: remove some and add others in the same call.
Changes the original array: it edits in place, which is the big difference from slice().
Returns the removed items: returns them as a new array, which is handy if you need to know what came out.
let fruits = ["apple", "banana", "mango", "orange"]; let removed = fruits.splice(1, 2); console.log(removed); // ["banana", "mango"] console.log(fruits); // ["apple", "orange"]
Syntax and Parameters
array.splice(start, deleteCount, item1, item2, ...);
start: the index where the change begins.
deleteCount: how many items to remove. Use 0 if you only want to add.
item1, item2, ...: the new items to insert at that position. These are optional.
Only start given: everything from that index to the end gets removed.
let nums = [1, 2, 3, 4, 5]; nums.splice(2); console.log(nums); // [1, 2]
Removing Items
Remove one item at a position:let colors = ["red", "green", "blue"]; colors.splice(1, 1); console.log(colors); // ["red", "blue"]Remove several in a row:
let nums = [10, 20, 30, 40, 50]; nums.splice(1, 3); console.log(nums); // [10, 50]Remove from the end using a negative index:
let letters = ["a", "b", "c", "d"]; letters.splice(-2, 2); console.log(letters); // ["a", "b"]
Adding Items
Set deleteCount to 0: nothing gets removed, and the new items slide in at the start index.let colors = ["red", "blue"]; colors.splice(1, 0, "green"); console.log(colors); // ["red", "green", "blue"]Add several at once:
let nums = [1, 5]; nums.splice(1, 0, 2, 3, 4); console.log(nums); // [1, 2, 3, 4, 5]
Replacing Items
Remove and add in one go: the new items take the place of the removed ones.let letters = ["a", "b", "c", "d"]; letters.splice(1, 2, "x", "y", "z"); console.log(letters); // ["a", "x", "y", "z", "d"]Swap a single item:
let tasks = ["study", "gym", "sleep"]; tasks.splice(1, 1, "cook"); console.log(tasks); // ["study", "cook", "sleep"]
A Real Pattern: Removing an Object by ID
Find its position first, then splice it out.
let users = [
{ id: 1, name: "Vi" },
{ id: 2, name: "Sam" },
{ id: 3, name: "Alex" }
];
let index = users.findIndex(u => u.id === 2);
if (index !== -1) {
users.splice(index, 1);
}
console.log(users.map(u => u.name)); // ["Vi", "Alex"]
Always check for -1 first: splice(-1, 1) would remove the last item by accident.Things to Remember
It changes the original array: if you need to keep the original, copy it first.let original = [1, 2, 3, 4]; let copy = [...original]; copy.splice(1, 1); console.log(original); // [1, 2, 3, 4] console.log(copy); // [1, 3, 4]There's a non-mutating version: toSpliced() returns a new array and leaves the original alone, in newer JavaScript environments.
let updated = original.toSpliced(1, 1);
Don't splice while looping forward: removing items shifts the indexes, so some get skipped. Loop backwards, or use filter() instead.
It returns the removed items, not the updated array; hence, you can't chain it like map().
Common Mistakes
- Mixing it up with slice(): one changes your array, the other doesn't.
- Expecting it to return the updated array: it returns what was removed.
- Using the wrong second argument: it's a count of items, not an end index.
- Splicing with an index of -1 by accident: this happens when a search finds nothing.
Conclusion
Frequently Asked Questions (FAQs)
Yes. It edits the array in place.
2. How do I add an item without removing anything?
3.What's the difference between splice() and slice()?Set the second argument to 0, like array.splice(1, 0, "new").
splice() changes the array and returns the removed items. slice() copies a portion and leaves the original alone.
0 Comments