What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In JavaScript, delete arr[index] removes the indexed property but does not shift later items or reduce the array’s length. It leaves a hole. To remove an item and close the gap, use arr.splice(index, 1).
What does delete do to an array?
JavaScript arrays are objects with indexed properties and a length property. Deleting an indexed property makes that position absent; it does not re-index the items that follow. MDN notes that deleting an array element does not affect its length. MDN: delete – JavaScript
const items = ["a", "b", "c"];
delete items[1];
console.log(items); // ["a", empty, "c"]
console.log(items.length); // 3
console.log(1 in items); // false
console.log(items[1]); // undefinedThe console’s empty display represents a missing index, not a stored value. Reading that index still produces undefined, so check whether the property exists with the in operator when the distinction matters.
How is a hole different from undefined?
A hole means the array has no property at that index. Assigning undefined creates a property whose value is undefined:
#1 Best Overall
const items = ["a", "b", "c"];
delete items[1];
console.log(1 in items); // false
items[1] = undefined;
console.log(1 in items); // trueBoth reads return undefined, but the index-existence test distinguishes them. This difference also affects iteration and array methods. MDN: Indexed collections – JavaScript
How do you remove an item and close the gap?
Use splice() when you want later elements to shift down and the array to become shorter. It changes the original array and returns an array containing the removed portion.
Rank #2
const items = ["a", "b", "c"];
const removed = items.splice(1, 1);
console.log(items); // ["a", "c"]
console.log(removed); // ["b"]
console.log(items.length); // 2The first argument is the starting index; the second is how many elements to remove. Unlike delete, splice() changes the array’s contents and shifts subsequent indexed properties. MDN: Array – JavaScript
What if the original array must stay unchanged?
Use a copy-producing approach instead of mutating the existing array. To remove an item at a known index with filter():
const nextItems = items.filter((_, index) => index !== removedIndex);For an index-based removal, toSpliced() is another non-mutating option in runtimes that support it. Check the target runtime’s support before relying on it. If removing by value, remember that indexOf(value) identifies only the first matching occurrence; for duplicates, use the intended index or a stable identifier.
Why can holes make loops behave unexpectedly?
Operations do not all treat missing indices alike. Methods such as forEach() and map() skip holes, so their callbacks may run fewer times than the array’s length. Indexed reads return undefined; for...of and spread produce an undefined value at a hole’s position. MDN: Indexed collections – JavaScript
Rank #4
When debugging, inspect both the length and the property’s presence:
console.log(items.length);
console.log(index in items);If you need a dense array with positions removed, use splice() for an in-place change or a copy-producing method for an unchanged original, rather than leaving holes with delete.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
