JavaScript delete Operator

The delete operator in JavaScript is used to remove a property from an object. It works for both properties owned by the object and those inherited from prototypes. When used on an array item, it creates a ‘hole’ in the array.

Syntax:

delete object
// or
delete object.property
// or
delete object['property']

Parameter: It does not take any parameters.

Return type: This operator returns true if it removes a property. While deleting an object property that doesn’t exist will return a true but it will not affect the object. However, while trying to delete a variable or a function will return a false.

JavaScript delete Operator Examples

Example 1: In this example, the salary property exists in the emp object, the delete operation is successful, and true is logged to the console.

javascript
let emp = { 
    firstName: "Raj", 
    lastName: "Kumar", 
    salary: 40000 
} 

console.log(delete emp.salary);
console.log(emp);

Output
true
{ firstName: 'Raj', lastName: 'Kumar' }

Explanation:

The code defines an object `emp` with properties `firstName`, `lastName`, and `salary`. `delete emp.salary` attempts to delete the `salary` property. It returns `true` if successful, and `false` otherwise. However, the property is still present in the `emp` object, as demonstrated by the subsequent `console.log(emp)`.

Example 2: Here’s an example illustrating the behavior of delete with a non-configurable property

javascript
// Define an object with a non-configurable property
let obj = {
    name: "John"
};

Object.defineProperty(obj, 'age', {
    value: 30,
    configurable: false // Making 'age' property non-configurable
});

console.log(obj); // { name: 'John', age: 30 }

// Attempt to delete the non-configurable property 'age'
let result = delete obj.age;
console.log(result); // false, deletion fails

console.log(obj); // { name: 'John', age: 30 }

Output
{ name: 'John' }
false
{ name: 'John' }

Explanation:

  • An object obj is defined with properties name and age.
  • The age property is made non-configurable using Object.defineProperty() with configurable: false.
  • An attempt is made to delete the age property using delete obj.age, which returns false because the property is non-configurable.
  • The age property remains unchanged in the object obj.

Example 3: Here, we are deleting Array Values Using delete

javascript
let arr = [1, 2, 3]

console.log(delete arr[0]); //true
console.log(arr); //[empty, 2, 3]

Output
true
[ <1 empty item>, 2, 3 ]

Explanation:

  • delete arr[0] removes the element at index 0 from the array arr.
  • The deleted element is replaced with an empty slot, represented by the string 'empty'.
  • The array still retains its original length but has an empty slot at index 0.

Example 4: In JavaScript, global properties declared with var or created without any declaration can be deleted.

Javascript
var globalVar = 10;
let localVar = 20;

console.log(delete globalVar); // true, deletion successful
console.log(delete localVar);  // false, deletion fails

console.log(globalVar); // undefined
console.log(localVar);  // 20, deletion failed

Output
false
false
10
20

Explanation:

  • globalVar is declared with var and localVar with let.
  • delete globalVar returns true, deleting the global property.
  • delete localVar returns false because let variables cannot be deleted.
  • globalVar becomes undefined after deletion, but localVar remains unchanged.

Conclusion:

Some developers use setting an object property’s value to null or undefined as an alternative method. However, this doesn’t fully remove the property; it still exists with the value of null or undefined. It can cause issues with operations like the ‘for…in’ loop. Additionally, using the delete operator in loops can significantly slow down the program. Therefore, it’s best to use delete only when it’s really necessary to remove an object property.