The JavaScript "delete" Operator 🎒

Introduction 🎇

In this article, we are going to discuss the delete operator in JavaScript. Delete is comparatively a lesser-known operator in JavaScript. We use this operator mainly to delete JavaScript object properties.

JavaScript has pop(), shift() or splice() methods to delete an element from an array. But because of the key-value pair in an object, the deleting is more complicated in case of objects. It is important to note that, the delete operator only works on objects and not on variables or functions.

Syntax

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

The 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 in any way. Though while trying to delete a variable or a function will return a false.

Example 🎞

Let's assume we have an object called person which has three key-value pairs (i.e., firstName, lastName and phone). Now, we'll use the delete operator to delete the phone property from the object.

Code

let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

console.log(delete person.phone); //true
console.log(person); //{ firstName: 'John', lastName: 'Doe'}

Output

As the above output shows, delete person.phone returns true and if we log the person object we can clearly see that the phone property doesn't exist anymore.

Let's try applying the delete operator for deleting a variable and a function.

Code

let num = 5;
let sum = (a, b) => {
  return a + b;
}

console.log(delete num); //false
console.log(delete sum); //false

Output

Because the delete operator doesn't work for variables or function, it returns false and the actual variables remain untouched.

Another thing to keep in mind is that this operator doesn't delete the value of the property rather it deletes the property itself.

Example 🎫

Code

let person = {
  firstName: "John",
  lastName: "Doe",
  phone: 12345
}

let phone = person.phone;

console.log(delete person.phone); //true
console.log(phone); //12345

Because objects are reference types, so both the person.phone and phone variable will refer to the same memory address.

Output

It is clearly visible that the delete operator has deleted the property but the value is still in the memory which shows that, delete doesn't delete the value.

Exception ❕

Global variables can be removed using the delete operator. Because the global variables are properties of the window object. And as delete works on objects, it'll delete the variable.

Code

toDelete = 5;

console.log(delete toDelete); //true

console.log(toDelete); //toDelete is not defined

Without using the var, let or const keyword sets the variable as a global variable. And it'll work as an object property.

Output

The delete toDelete returns true and if we try to access the variable after deleting it we'll get a reference error as the variable is not defined.

Deleting Array Values Using delete 🎩

As we know JavaScript arrays are after-all objects. So, the delete operator can be used to delete an array item. But it'll cause a problem because after deleting the element from the array, this operator will show the position as empty and it'll not update the array length also.

Example

Code

let arr = [1, 2, 3]

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

Output

So, using pop(), shift() or splice() methods are clearly a better approach to delete array elements.

Conclusion ✍

Developers uses many workarounds to delete an object property, such as setting the value of an object property to null or undefined. But the property will still exist on the object and some operators like for in loop will still show the presence of the null property which can cause problems in many cases.

Using the delete property in loops also slows down a program significantly. So, this method should only be used when it is absolutely necessary to delete an object property without leaving any traces.