5 Things to Know About the JavaScript Delete Operator

In JavaScript, the delete operator is employed to delete a property of an object. After deleting the actual property, that property won’t be accessible and returns undefined.  

The invocation of the delete operator returns true when it removes a property and false otherwise. it’s only effective on an object’s properties. It has no effect on variable or function names.

The delete operator shouldn’t be used on predefined JavaScript object properties like window, Math and Date objects as it can crash your application.

Let’s scrutinize some facts about the delete operator.

Delete Object Properties

The delete operator is the only way to fully remove the properties of an object in JavaScript.

var user = {
  firstName: "John",
  lastName: "Smith",
  fullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

console.log(delete user.firstName);  // true
console.log(user);                   // {lastName: "Smith", fullName: f}

If the property that you’re trying to delete doesn’t exist, delete won’t have any effect and can return true.

var obj = {
  firstName: "John",
  lastName: "Smith"
}

// trying to delete the not existed property name
console.log(delete obj.name);  // true

JavaScript Delete Operator Can’t Delete a Variable

The delete operator removes a property from an object. It can’t delete a variable. Any property declared with var can’t be deleted from the global scope or from a function’s scope.

var x = 1;                     // create with var, x is a variable
console.log(delete x);        // return false
console.log(x);               // x is still 1

If you declare a variable without var, it can be deleted. Let’s look into the example below.

x = 1;                        // without var declaration
console.log(delete x);       // return true
console.log(x);              // error x is not defined

The variable declared without the var keyword internally stores it as a property of the window object. So, we can delete the properties of the window object.

More on JavaScript:  How to Make a JavaScript API Call

JavaScript Delete Operator Can Delete Values From an Array

Since JavaScript arrays are objects, elements can be deleted by using delete.

var arr = ["a", "b", "c", "d"];
console.log(delete arr[0]);             // true
console.log(arr[0]);                    // undefined
console.log(arr);                       // [empty, "b", "c", "d"]
console.log(JSON.stringify(arr));       // [null,"b","c","d"]

delete will delete the object property, but it will not reindex the array or update its length. This makes it appear as if it’s undefined.

Using delete may leave undefined holes in the array. Use pop(), shift() or splice() instead.

JavaScript Delete Operator Can’t Delete Built-In Objects

console.log(Math);               // Math {abs: f, round: f, floor: f, …}
console.log(delete Math);       // true
console.log(Math);              // Uncaught ReferenceError: Math is not defined

Deleting built-in objects like Math, Date, and window objects are unsafe, and they can crash your entire application.

JavaScript Delete Operator Can Delete Some Non-Configurable Properties

Object properties, besides a value, have three special attributes:

• writable: If true, the value can be changed, otherwise, it’s read-only.
• enumerable: If true, it’s listed in loops, otherwise, it’s not listed.
• configurable: if true, the property can be deleted or the attributes can be modified, otherwise, it cannot be changed.

let user = {
  name: "Jayanth"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');
console.log(JSON.stringify(descriptor));
/* {
  "value": "Jayanth",
  "writable": true,
  "enumerable": true,
  "configurable": true
} */

Values assigned by using Object.defineProperty and set to configurable: false in an object can’t be deleted.

let user = {};
Object.defineProperty(user, "name", {
  value: "Jayanth",
  configurable: false
});

console.log(delete user.name);  // false
console.log(user);              // {name: "Jayanth"}

In strict mode, it will throw an error if you try to delete a non-configurable property.

'use strict';
let user = {};
Object.defineProperty(user, "name", {
  value: "Jayanth"
});

console.log(delete user.name); 
// Cannot delete property 'name' of #<Object>

More on JavaScript: What Are JavaScript Algorithms and Data Structures?

Why Understanding the Delete Operator Is Valuable

delete is the only true way to remove an object’s properties without any leftovers, but it works significantly slower if you are using delete in loops.

The alternative solution is setting the value to undefined like object[key] = undefined. It doesn’t fully delete the property, it just sets the value to undefined. This option isn’t a prominent solution, but if you utilize it with care, then you’ll be able to improve the performance.

Frequently Asked Questions