Reaching for the wrong tool when removing an array item by index is a rite of passage for JavaScript developers. The delete operator looks like it should work, but it leaves an undefined hole instead of closing the gap. The fix is the splice method, and the difference becomes obvious the moment you see the two side by side.
Why delete breaks array removal
The delete operator removes a property from an object, and arrays in JavaScript are objects. When you call delete array[index], it yanks the value but leaves the slot intact. The array length stays the same, and you end up with an explicit undefined at that index. Any code that iterates or maps over the array—rendering table rows, for instance—will break or show blank entries.
This is not a theoretical edge case. It is the exact scenario that prompted this write-up: a developer deleted an array element, expected the rendered table to update, and watched the row count stay fixed while the slot turned empty.
How splice fixes it
The splice method edits the array in place. Pass the starting index as the first argument and the number of items to remove as the second. The remainder of the array shifts down to fill the gap, and the length updates correctly.
Decision checklist: Removing items from a JavaScript array
- Need to remove by index? → Use splice(index, 1)
- Need to keep the original array unchanged? → Use filter or slice instead
- Working with React state or Redux? → Prefer filter or slice to avoid mutation bugs
- Only removing a few specific items based on value? → Use filter
- Need to capture what you removed? → splice returns the deleted elements
An added bonus: splice returns the removed values as an array. If you want to log the deleted item, fire an analytics event, or push it into an undo stack, splice hands it to you without extra steps.
Omitting the second argument removes everything from the starting index onward. That is useful for truncating a queue, but risky if you forget it by accident.
Our analysis / Why it matters
The delete mistake persists because the two approaches look interchangeable in casual code review. They are not, and the consequences are subtle but real.
The core trade-off is mutation. Splice mutates the original array. In vanilla JavaScript, that is usually fine. In React state or Redux reducers, mutation is a common source of bugs because those systems rely on detecting changes via reference equality. If splice modifies the array you passed in, React may not see a change at all.
That is why filter and slice belong in your toolkit even though they are less direct. Filter creates a new array, so React detects the change and re-renders. Slice creates a shallow copy excluding the removed portion, also preserving immutability.
The practical implication: splice is the right default for quick scripts, event handlers, and non-framework code. Switch to filter or slice the moment your array lives inside a state object.
Bottom line
Use splice to remove items by index when mutation is acceptable. Use filter or slice when your code path needs immutability. Never trust delete on an array—it leaves holes where you wanted clean cuts.
Key takeaways
- Delete leaves undefined and preserves array length, breaking iteration and renders.
- Splice edits in place, shifts remaining items, and returns the removed values.
- Omitting splice's second argument removes everything from the index onward.
- Prefer filter or slice in immutability-first contexts like React and Redux.
- The before-and-after comparison makes the failure impossible to miss.
Frequently asked questions
Can I use delete to remove an array element?
You can, but the slot becomes undefined, the array length stays the same, and iteration breaks. It is not a reliable way to remove items.
What does splice return?
Splice returns an array of the removed elements, so you can capture them for logging, analytics, or undo logic.
What happens if I omit the second argument?
Splice removes everything from the starting index to the end of the array.
When should I avoid splice?
Avoid it in React state updates, Redux reducers, or any code that relies on immutability. Use filter or slice instead.