CODEWITHSUNDEEP
javascript
Abraham P
Abraham P

Reputation: 15471

What is more efficient, deleting an element or setting it to undefined explicitly

Say I have an Associative Array Foo, with key bar and value xyz.

 console.log(Foo['bar']);

 >> xyz

 delete Foo['bar'];
 console.log Foo['bar'];

 >> undefined

 Foo['bar'] = 'xyz';
 console.log(Foo['bar']);

 >> xyz

 Foo['bar'] = undefined;
 console.log (Foo['bar']);

 >> undefined

My question is, which of the two is more efficient, do they differ in any way? Is there a scenario when I should use one over the other?

Thanks!

Results:

Thank you to everyone for helping out and showing me jsperf. Setting it to undefined appears to be (relatively) significantly faster then delete, although all the caveats pointed out below are also very interesting (in fact, I will probably be using delete a lot going forward to avoid future errors out of leftfield).

Upvotes: 16

Views: 12595

Answers (7)

JSuar
JSuar

Reputation: 21091

From the link I commented:

The delete operator removes a property entirely. Setting a property to undefined removes the value. Setting a property to null changes the value to the null value.

Technically they are not equivalent, but in practice they are often used to mean the same thing: that a property is unset.

Setting the object to null was the fastest.

Some good resources to understanding these operations:

Upvotes: 4

jAndy
jAndy

Reputation: 235992

I didn't benchmark the performance of those operations (as I mentioned in a comment, just create a little benchmark on https://jsperf.app), but I'll lose some words on the difference.

You will always be good on deleteing properties, wheras setting them to undefined or null will let people and/or code hang, which check with the IN operator.

Like

if( 'bar' in Foo ) { }

will still return true if you set Foo.bar to undefined. It won't if you go with delete Foo.bar.

Upvotes: 9

Danii
Danii

Reputation: 357

After some experimentation and research, I have concluded that, at least on my machine, using the delete operator is 6 times slower than assigning undefined. Despite that, it is important to remember what jAndy said about the prototype chain and property existence.

If you'd like to re preform my tests, I instantiated an array of 50,000 items. (Item count doesn't matter as long as it is big enough to show a difference between both tests.)

let arr = new Array(500000).fill(null).map(() => ({"item": 42}));

And then I timed the amount of time it took to assign each object's item property to undefined in the array against the amount of time it took to delete each object's item property in the array.

console.time("Assignment To Undefined");
arr.forEach(object => object.item = undefined);
console.timeEnd("Assignment To Undefined");

//Reset the array here...

console.time("Deletion");
arr.forEach(object => delete object.item);
console.timeEnd("Deletion");

All of my results:

  • Deletion: Approximately 200 - 170 ms.
  • Assignment: Approximately 15 - 40 ms.

Upvotes: 10

splintor
splintor

Reputation: 10154

Apart for benchmarking the actual action of deleting or assigning to undefined, you should also consider the future performance implication of using the object after you changed it.

I can think of two:

  1. Once the property is deleted, accessing it will cause JavaScript to look it up in the prototype chain, whereas if the property still exists on the object (with undefined value), the prototype chain won't be searched.

  2. Deleting the property changes the "object shape" and might hurt JavaScript optimizations.

Upvotes: 5

jfriend00
jfriend00

Reputation: 707258

Since deleting the property doesn't do the same thing programmatically as setting it to undefined, it really depends upon what programming outcome you want.

delete Foo['bar']; removes the bar property from the Foo object. It will not be there if someone iterates over the direct properties of Foo.

Foo['bar'] = undefined sets the property to undefined, but it still exists on the object and will still be there, but have a value of undefined.

So, if you want to get rid of the property, use delete. If you want the property to still be there, but have an undefined value, then set it to undefined.

If you really just want to know which is fastest and for some reason don't care out the programming difference, then go to jsperf.com, make yourself two comparison test cases and run the jsperf in a bunch of different browsers that are relevant to you. All performance questions should be answered with relevant real world testing.

Upvotes: 3

Aesthete
Aesthete

Reputation: 18848

Be aware that deleting a property from an object will replace that property with one of the same name if one exists on the prototype chain.

Setting the property to null or undefined will simply mask it.

Upvotes: 9

David G
David G

Reputation: 96810

It'll make a negative performance difference in the long term as b is still considered a property after the latter assignment to undefined. For example:

var a = { b : 0 };

a.b = undefined;

a.hasOwnProperty("b");
>>> true

Same goes for the in keyword ("b" in a is true) so this will most likely hinder iteration when part of a larger object.

Upvotes: 5

Related Questions