17

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).

6

7 Answers 7

9

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.
8

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.

7

I didn't benchmark the performance of those operations (as I mentioned in a comment, just create a little benchmark on http://www.jsperf.com), 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.

1
  • Thank you for the excellent response, I upvoted it. I gave it to David as his also mentioned hasOwnProperty.
    – Abraham P
    Dec 21, 2012 at 0:44
5

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.

1
  • If you use "delete a.b" you will see that a.hasOwnProperty('b') turns to false, so that's another option
    – skiss
    Mar 23, 2023 at 23:39
5

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.

4

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:

1
  • null is grossly misused in the js code I've seen. It signifies an intentional null value, as opposed to a value that has not been set. Good link to point out they are not equivalent.
    – Aesthete
    Dec 21, 2012 at 0:03
3

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.

1
  • Thank you for the excellent response, I upvoted it. I gave it to David as his also gave code example cases.
    – Abraham P
    Dec 21, 2012 at 0:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.