delete vs assign with undefined in JavaScript

Today code, I encountered the case to delete a property in the object. At first glance, it seems simple but contains unexpected knowledge. ?

As you know, there are 2 ways to “remove” a property from an object in JavaScript:

1. Use delete operator
   
   <span class="token keyword">delete</span> foo <span class="token punctuation">.</span> bar

   1 2	<span class="token keyword">delete</span> foo <span class="token punctuation">.</span> bar

2. Assign the property to be deleted with undefined
   
   foo <span class="token punctuation">.</span> bar <span class="token operator">=</span> undefined

   1 2	foo <span class="token punctuation">.</span> bar <span class="token operator">=</span> undefined

After a while Google Attorney General, I can summarize the differences between the two ways.

1. Assigning a property with undefined does not completely delete that property

The first thing you should know is that assigning foo.bar with undefined simply gives the property a value of undefined . This means that when you use the hasOwnProperty() function or loop the object in a for in loop, the property still exists.

If you use the delete operator, the property will be completely deleted, and the results in the above code will be reversed.

The reason is because the delete operator changes the hidden class , which is equivalent to the fact that the property bar has never been declared. This does not occur when assigning foo.bar with undefined , as this only reassigns the value of the property bar . So if you want to check if an object exists for certain properties, use the hasOwnProperty() function hasOwnProperty() than a simple check:

Try to understand the difference between undefined and not defined in JavaScript again, it’s quite interesting! ?

2. What if the object has a prototype chain?

I have an example as follows:

Have you guessed what the above code will log out?

If you think the result is undefined then I am sorry, today you clicked =))

Here we have an extended object whose prototype is object origin . After calling delete , each time revisit extended.x JavaScript engine will look up from extended chain prototype and find origin property x . The result returns the console as 1 .

OK, so, what happens when I change the last two lines of the above code to the following:

Now the log output will be undefined . Because property x still exists in extended with the value equal to undefined , there will be no looking up from the prototype chain.

The catch is that when you “remove” a property from an object, if you are unsure whether the object has a prototype chain and if the object inherits the prototype that contains the property to be deleted, you should assign it with undefined instead. Use delete operator.

3. “I have a Linux machine with 0.8GHz CPU and 256MB RAM, I care about performance!”

As mentioned in part 1, delete a property will change the hidden class, meaning that the performance is affected. You should avoid using delete operator too much, especially in the loop. However, this does not mean that you should never use this operator. Optimizing the code at the JavaScript engine level will not be worth a tradeoff if it makes your code read as economically.

This article has helped you understand the difference between 2 ways to remove property from object in JavaScript. Hope it helps you to level up to go out with colleagues. ? Thank you for reading my article.

Reference from:

• javascript – delete ax vs ax = undefined – Stack Overflow
• A few notes about V8 and Garbage Collection | Huy’s Blog