A better understanding of delete operator is necessary for JavaScript developers. As the name suggests, the delete operator deletes properties from the object. You can delete a property as shown below:
It returns true on successful deletion. However, in some cases, it may return true even if it does not delete a property. In this blog post, we will learn five such features of the JavaScript delete operator.
#1: Does not delete variable created using var
The delete operator does not delete variable created using var from global scope or function scope. In addition, it does not delete any function created in the global scope.
var foo = 9; koo = 9; console.log(foo); // 9 console.log(koo); // 9 delete foo; // false delete koo; // true console.log(foo); // 9 console.log(koo); // Error: koo is not defined
In the above code, we have created two variables foo and koo. Variable foo is created using var, and variable koo is created without using var. Therefore, the delete operator will able to delete koo and returns true, but won’t able to delete variable foo and returns false. As koo is deleted successfully, when you try to print its value, JavaScript throws an error that koo is not defined.
The delete operator does not delete any function from the global scope.
function foo(){
}
var koo = function(){
}
console.log(delete foo); // false
console.log(delete koo); // false
Whether function statement or function expression, the delete operator does not delete them and returns false as shown in the above code listing.
#2: Does not delete variable created using let or const
The delete operator does not delete variables created using let or const from their execution context. Consider a function, as shown below:
function Student(){
let name = 'foo';
const height = 165;
console.log(name); // foo
console.log(height); // 165
delete name; // false
delete height; // false
console.log(name); // foo
console.log(height); // 165
}
Student();
In the Student function, we have created two variables name and height using let and const respectively. Now when you delete the name variable, the delete operator does not delete it and returns false. In the same way, when you delete the height variable, the delete operator does not delete it and returns false.
So, the delete operator does not delete variables created using let, or const from the function scope.
#3 Only deletes the object’s own property
The delete operator only deletes an object’s own property. In addition, it does not delete the property, if its configurable is set to false.
Consider an object, as shown below:
var Dog = {
name:'foo',
age : 7
}
JavaScript object’s own property means property, which is part of the object itself and not from the prototype chain. The delete operator can delete its own properties and on successful deletion returns true. Consider below code listing:
console.log(Dog.age); // 7 delete Dog.age; // true console.log(Dog.age); // undefined
The delete operator deletes age property successfully and returns true. Therefore, after deleting when you read Dog.age value, JavaScript returns undefined.
For any property, if configurable is set to false, the delete operator will not be able to delete that. Consider below code listing:
var Dog = {
name:'foo',
age : 7
}
Object.defineProperty(Dog,'age',{configurable:false});
delete Dog.age; // false
console.log(Dog.age); // 7
As we have set configurable to false for age property, the delete operator will not be able to delete it and returns false.
#4 Does not delete property from the prototype chain
The delete operator does not delete property from the prototype chain. Consider the code listing below, in which we are creating a prototype chain.
var Animal = {
name : 'foo',
age : 7
}
var Dog = {
name:'foo Dog',
isCute : true
}
// Creating prototype chain
Dog.__proto__ = Animal;
We have two objects Animal and Dog. Both have a name property. We are creating a prototype chain between these two objects using __proto__. Keep in mind that there are other ways also to create a prototype chain between the JavaScript object. However, the behavior of the delete operator would be the same. Consider below code listing:
console.log(Dog.name); // foo dog delete Dog.name// true console.log(Dog.name); // foo delete Dog.name // won't delete from Animal console.log(Animal.name); // foo
For first print, JavaScript prints value foo dog, as Dog object has its own name property, and JavaScript prints that value.
In next line, when you delete Dog.name, delete operator successfully deletes it and returns true because as of now Dog object has its own property name.
After deleting Dog.name, when you print its value again, JavaScript will traverse the prototype chain because now no longer Dog has a name property, it will find name property with the Animal object and will print the value.
In next line, when you delete Dog.name, delete operator does not delete because the name is no longer own property of object Dog. JavaScript delete operator does not delete property from the prototype chain.
Keep in mind that the delete operator does not delete property from the prototype chain.
#5 If the property does not exist, delete does not do anything
If the property which you are trying to delete does not exist, delete will not have any effect, and also it will return true. Consider the code listed below:
var Animal = {
name :'foo',
age : 9
}
console.log(delete Animal.isCute); // true
console.log(delete loo); // true
As you see that in Animal object, there is no isCute property, hence the delete operator will do nothing and returns true. Also, we do not have loo property in the global scope, so the delete operator does nothing and returns true.
Understanding of JavaScript delete operator is essential for any developer. I hope, now you are aware of five important characteristics of the delete operator. Thanks for reading it.
Dhananjay Kumar 
Leave a Reply