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.
Top comments (0)