The delete
operator is used to remove properties from objects.
const obj = { foo: "bar" };
delete obj.foo;
obj.hasOwnProperty("foo"); // false
Note that, for arrays, this is not the same as removing an element. To remove an element from an array, use Array#splice
or Array#pop
. For example:
arr; // [0, 1, 2, 3, 4]
arr.splice(3,1); // 3
arr; // [0, 1, 2, 4]
Details
Strictly speaking, it's impossible to truly delete anything in JavaScript. The delete
operator neither deletes objects nor frees memory. Rather, it sets its operand to undefined
and manipulates the parent object so that the member is gone.
let parent = {
member: { str: "Hello" }
};
let secondref = parent.member;
delete parent.member;
parent.member; // undefined
secondref; // { str: "Hello" }
The object is not deleted. Only the reference is. Memory is only freed
by the garbage collector when all references to an object are removed.
Another important caveat is that the delete
operator will not reorganize structures for you, which has results that can seem counterintuitive. Deleting an array index, for example, will leave a "hole" in it.
let array = [0, 1, 2, 3]; // [0, 1, 2, 3]
delete array[2]; // [0, 1, empty, 3]
This is because arrays are objects. So indices are the same as keys.
let fauxarray = {0: 1, 1: 2, length: 2};
fauxarray.__proto__ = [].__proto__;
fauxarray.push(3);
fauxarray; // [1, 2, 3]
Array.isArray(fauxarray); // false
Array.isArray([1, 2, 3]); // true
Different built-in functions in JavaScript handle arrays with holes in them differently.
for..in
statements will skip the empty index completely.
A naive for
loop will yield undefined
for the value at the index.
Any method using Symbol.iterator
will return undefined
for the value at the index.
forEach
, map
and reduce
will simply skip the missing index, but will not remove it
Example:
let array = [1, 2, 3]; // [1,2,3]
delete array[1]; // [1, empty, 3]
array.map(x => 0); // [0, empty, 0]
So, the delete
operator should not be used for the common use-case of removing elements from an array. Arrays have a dedicated methods for removing elements and reallocating memory: Array#splice()
and Array#pop
.
Array#splice(start[, deleteCount[, item1[, item2[, ...]]]])
Array#splice
mutates the array, and returns any removed indices. deleteCount
elements are removed from index start
, and item1, item2... itemN
are inserted into the array from index start
. If deleteCount
is omitted then elements from startIndex are removed to the end of the array.
let a = [0,1,2,3,4]
a.splice(2,2) // returns the removed elements [2,3]
// ...and `a` is now [0,1,4]
There is also a similarly named, but different, function on Array.prototype
: Array#slice
.
Array#slice([begin[, end]])
Array#slice
is non-destructive, and returns a new array containing the indicated indices from start
to end
. If end
is left unspecified, it defaults to the end of the array. If end
is positive, it specifies the zero-based non-inclusive index to stop at. If end
is negative it, it specifies the index to stop at by counting back from the end of the array (eg. -1 will omit the final index). If end <= start
, the result is an empty array.
let a = [0,1,2,3,4]
let slices = [
a.slice(0,2),
a.slice(2,2),
a.slice(2,3),
a.slice(2,5) ]
// a [0,1,2,3,4]
// slices[0] [0 1]- - -
// slices[1] - - - - -
// slices[2] - -[3]- -
// slices[3] - -[2 4 5]
Array#pop
Array#pop
removes the last element from an array, and returns that element. This operation changes the length of the array. The opposite operation is push
Array#shift
Array#shift
is similar to pop
, except it removes the first element. The opposite operation is unshift
.
regex
, otherwise eslint will complain about an unused variable. – Maguire