Learnitweb

delete operator in JavaScript

1. Introduction

The delete operator removes a property from an object. If the property’s value is an object and there are no more references to the object, the object held by that property is eventually released automatically.

const Employee = {
    firstname: 'Maria',
    lastname: 'Sanchez',
  };
  
  console.log(Employee.firstname);
  // Expected output: "Maria"
  
  delete Employee.firstname;
  
  console.log(Employee.firstname);
  // Expected output: undefined

Because classes are automatically in strict mode, and private properties can only be legally referenced in class bodies, this means private properties can never be deleted.

delete console.log(1);
// Logs 1, returns true, but nothing deleted

2. Syntax

delete object.property
delete object[property]

Returns true for all cases except when the property is an own non-configurable property, in which case false is returned in non-strict mode.

3. Scenarios

It is important to consider the following scenarios:

  • If the property which you are trying to delete does not exist, delete will not have any effect and will return true.
  • delete only has an effect on own properties. If a property with the same name exists on the object’s prototype chain, then after deletion, the object will use the property from the prototype chain.
  • Non-configurable properties cannot be removed. This includes properties of built-in objects like Math, Array, Object and properties that are created as non-configurable with methods like Object.defineProperty().
  • Deleting variables, including function parameters, never works. delete variable will throw a SyntaxError in strict mode, and will have no effect in non-strict mode.
    • Any variable declared with var cannot be deleted from the global scope or from a function’s scope, because while they may be attached to the global object, they are not configurable.
    • Any variable declared with let or const cannot be deleted from the scope within which they were defined, because they are not attached to an object.

4. delete and the prototype chain

In the following example, we delete an own property of an object while a property with the same name is available on the prototype chain:

function Foo() {
  this.bar = 10;
}

Foo.prototype.bar = 42;

const foo = new Foo();

// foo.bar is associated with the
// own property.
console.log(foo.bar); // 10

// Delete the own property within the
// foo object.
delete foo.bar; // returns true

// foo.bar is still available in the
// prototype chain.
console.log(foo.bar); // 42

// Delete the property on the prototype.
delete Foo.prototype.bar; // returns true

// The "bar" property can no longer be
// inherited from Foo since it has been
// deleted.
console.log(foo.bar); // undefined

5. Deleting array elements

When you delete an array element, the array length is not affected. This holds even if you delete the last element of the array.

When the delete operator removes an array element, that element is no longer in the array. In the following example, trees[3] is removed with delete.

const trees = ["redwood", "bay", "cedar", "oak", "maple"];
delete trees[3];
console.log(3 in trees); // false

This creates a sparse array with an empty slot. If you want an array element to exist but have an undefined value, use the undefined value instead of the delete operator. In the following example, trees[3] is assigned the value undefined, but the array element still exists:

const trees = ["redwood", "bay", "cedar", "oak", "maple"];
trees[3] = undefined;
console.log(3 in trees); // true

If instead, you want to remove an array element by changing the contents of the array, use the splice() method. In the following example, trees[3] is removed from the array completely using splice():

const trees = ["redwood", "bay", "cedar", "oak", "maple"];
trees.splice(3, 1);
console.log(trees); // ["redwood", "bay", "cedar", "maple"]

6. Deleting non-configurable properties

When a property is marked as non-configurable, delete won’t have any effect, and will return false. In strict mode, this will raise a TypeError.

const Employee = {};
Object.defineProperty(Employee, "name", { configurable: false });

console.log(delete Employee.name); // returns false

var creates non-configurable properties that cannot be deleted with the delete operator:

// Since "nameOther" is added using with the
// var keyword, it is marked as non-configurable
var nameOther = "XYZ";

// We can access this global property using:
Object.getOwnPropertyDescriptor(globalThis, "nameOther");
// {
//   value: "XYZ",
//   writable: true,
//   enumerable: true,
//   configurable: false
// }

delete globalThis.nameOther; // return false

In strict mode, this would raise an exception.

7. Deleting global properties

If a global property is configurable (for example, via direct property assignment), it can be deleted, and subsequent references to them as global variables will produce a ReferenceError.

globalThis.globalVar = 1;
console.log(globalVar); // 1
// In non-strict mode, you can use `delete globalVar` as well
delete globalThis.globalVar;
console.log(globalVar); // ReferenceError: globalVar is not defined