The Secret of the ‘delete operator’

What exactly is destructible in JavaScript?

The delete operator is arguably an old language feature of JavaScript. As it literally means, it wants to destroy something, but what exactly can be destroyed? Come and explore with me!

delete 0

When delete 0 is executed, will it be destroyed from the execution system from 0?

Obviously not, its real purpose is to delete a property reference of an object.

delete object.property
delete object['property']

Generally, successful deletion will return true and failure will return false, but there are some exceptions.

Own properties

The delete operator only works on its own property. If there is a property with the same name on the prototype chain, this property will be skipped.

Object.prototype.name = 1;
const object = {
  name: 2,
};
// Only valid for its own properties.
console.log(delete object.name); // true
console.log(object.name); // 1
// But we can directly manipulate the prototype object.
console.log(delete Object.getPrototypeOf(object).name); // true
console.log(object.name); // undefined

Non-existent property

If the deleted property does not exist, delete will have no effect, but will still return true.

const object = {};
delete object.name; // true

Non-configurable property

Non-configurable properties cannot be removed.

const object = {};
Reflect.defineProperty(object, 'name', {
  configurable: false,
});
// Built-in object properties
console.log(delete Math.PI); // false
// Non-configurable properties
console.log(delete object.name); // false

In non-strict mode, removing a non-configurable property of itself will return false, but in strict mode, it will throw a TypeError.

'use strict';
const object = {};
Reflect.defineProperty(object, 'name', {
  configurable: false,
});
// ❌ TypeError: Cannot delete property 'PI' of #<Object>
console.log(delete Math.PI);
// ❌ TypeError: Cannot delete property 'name' of #<Object>
console.log(delete object.name);

Properties declared by var, let, const

In the global scope, neither properties declared with var nor functions declared with function declarations (non-function expressions) can be deleted. This is because both the declared properties are mounted on the window and are non-configurable, so the logic of the previous item will be followed when deleting.

In addition, properties declared with var, let, const and those functions cannot be deleted, either in the global scope or in the function scope.

{
  let object = {
    name: 1,
  };
  function getName(obj) {
    return obj.name;
  }
  console.log(delete object); // false
  console.log(delete getName); // false
}

In non-strict mode, false is returned, but in strict mode, a SyntaxError is thrown instead of a TypeError.

'use strict';
{
  let object = {
    name: 1,
  };
  function getName(obj) {
    return obj.name;
  }
  // ❌ SyntaxError: Delete of an unqualified identifier in strict mode.
  console.log(delete object);
  // ❌ SyntaxError: Delete of an unqualified identifier in strict mode.
  console.log(delete getName);
}

Array property

First of all, the length property of the array is not configurable, so deleting it in strict mode will throw a TypeError.

'use strict';
const arr = [1, 2, 3, 4, 5];
console.log(Reflect.getOwnPropertyDescriptor(arr, 'length'));
// ❌ TypeError: Cannot delete property 'length' of [object Array]
console.log(delete arr.length);

In addition, when deleting an array element, the deleted item will be empty.

If you want to modify the original array, you can use Array.prototype.splice(), see my previous article for details.

Conclusion

The real purpose of the ‘delete operator’ in JavaScript is to delete a property reference of an object. It can behave strangely in some special cases, so it’s best to only use it to remove configurable properties that exist on the object itself.

Besides that, please note that the ‘delete operator’ has nothing to do with freeing memory directly (compared to delete in C++), this is because the runtime environment of the JavaScript manages memory automatically. For more information on programming language memory management check out my previous article:

Memory Management Every Developer Should Know

That’s all for today. I’m Zachary and I’ll continue to output stories related to web development, don’t forget to follow me if you like such stories.