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
delete object.property
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);
console.log(person);
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);
console.log(delete sum);
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);
console.log(phone);
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);
console.log(toDelete);
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]);
console.log(arr);
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.
