202

Is there any substantial difference in doing either of these?

delete a.x;

vs

a.x = undefined;

where

a = {
    x: 'boo'
};

could it be said that they are equivalent?

(I'm not taking into account stuff like "V8 likes not using delete better")

3
  • 2
    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. Here's a perf test if you like: jsperf.com/delete-vs-undefined-vs-null/3
    – j08691
    Feb 19, 2013 at 21:15
  • 1
    @j08691 Nit: It doesn't remove the value. It assigns undefined as the value, which is still a ..
    – user166390
    Feb 19, 2013 at 21:20
  • You should talk about why you care about this, then the answer can cater to your actual problem. Feb 19, 2013 at 21:22

9 Answers 9

237

They are not equivalent. The main difference is that setting

a.x = undefined

means that a.hasOwnProperty("x") will still return true, and therefore, it will still show up in a for in loop, and in Object.keys(). Whereas

delete a.x

means that a.hasOwnProperty("x") will return false

You can't tell if a property exists by testing

if (a.x === undefined)

If you are trying to determine if a property exists, you should always use

// If you want inherited properties
if ('x' in a)

// If you don't want inherited properties
if (a.hasOwnProperty('x'))

Following the prototype chain (mentioned by zzzzBov) Calling delete will allow it to go up the prototype chain, whereas setting the value to undefined will not look for the property in the chained prototypes

var obj = {
  x: "fromPrototype"
};
var extended = Object.create(obj);
extended.x = "overriding";
console.log(extended.x); // overriding
extended.x = undefined;
console.log(extended.x); // undefined
delete extended.x;
console.log(extended.x); // fromPrototype

Deleting Inherited Properties If the property you are trying to delete is inherited, delete will not affect it. That is, delete only deletes properties from the object itself, not inherited properties.

var obj = {x: "fromPrototype"};
var extended = Object.create(obj);
delete extended.x;
console.log(extended.x); // Still fromPrototype

Therefore, if you need to make sure an object's value will be undefined, delete will not work when the property is inherited, you will have to set (override) it to undefined in that case. Unless the place that is checking for it will use hasOwnProperty, but it likely wouldn't be safe to assume that everywhere that checks it will use hasOwnProperty

3
  • 1
    "x" in a will also return true with the former, and false with the latter. The output of Object.keys will also be different. Feb 19, 2013 at 21:16
  • why do you state that I shouldn't check for undefined? seems reasonable enough to me.
    – bevacqua
    Feb 19, 2013 at 21:49
  • @Nico Because that won't tell you if a property exists. I'm not saying don't ever use it. But if you're checking for undefined, you may as well just check if (a.x), unless it's for numbers and 0 is valid Feb 20, 2013 at 20:33
38

To paraphrase the question:

Are delete a.x and a.x = undefined equivalent?

No.

The former removes the key from the variable, the later sets the key with a value of undefined. This makes a difference when iterating over properties of objects, and when hasOwnProperty is used.

a = {
    x: true
};
a.x = undefined;
a.hasOwnProperty('x'); //true
delete a.x;
a.hasOwnProperty('x'); //false

Additionally, this will make a significant difference when the prototype chain is involved.

function Foo() {
    this.x = 'instance';
}
Foo.prototype = {
    x: 'prototype'
};
a = new Foo();
console.log(a.x); //'instance'

a.x = undefined;
console.log(a.x); //undefined

delete a.x;
console.log(a.x); //'prototype'
1
  • 3
    +1 Great point about delete allowing it to go up the prototype chain Mar 11, 2013 at 18:53
8

If a.x is a setter function, a.x = undefined will call the function whereas delete a.x will not call the function.

3
  • But will it delete the function?
    – sEver
    Oct 17, 2023 at 16:51
  • "delete a.x" would remove the function (i.e. "remove property x from object a") whereas "a.x = undefined" would not remove the function (i.e. "use setter x on object a with an input argument of undefined")
    – martin770
    Oct 19, 2023 at 12:23
  • You could add that to the answer. Instead of "will not call the function" should say "will not call the function, but will delete it instead".
    – sEver
    Nov 1, 2023 at 18:22
4

Using an array, instead of an object, I can showcase that delete uses less heap memory than undefined.

For example, this code will not finish:

let y = 1;
let ary = [];
console.log("Fatal Error Coming Soon");
while (y < 4294967295)
{
    ary.push(y);
    ary[y] = undefined;
    y += 1;
}
console(ary.length);

It produces this error:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory.

So, as you can see undefined actually takes up heap memory.

However, if you also delete the ary-item (instead of just setting it to undefined), the code will slowly finish:

let x = 1;
let ary = [];
console.log("This will take a while, but it will eventually finish successfully.");
while (x < 4294967295)
{
    ary.push(x);
    ary[x] = undefined;
    delete ary[x];
    x += 1;
}
console.log(`Success, array-length: ${ary.length}.`);

These are extreme examples, but they make a point about delete that I haven't seen anyone mention anywhere.

3

Yes there is a difference. If you use delete a.x the x isn't any more a property of a, but if you use a.x=undefined it is a property but its value is undefined.

2

The names are a little confusing. a.x = undefined just sets the property to undefined, but the property is still there:

> var a = {x: 3};
> a.x = undefined;
> a.constructor.keys(a)
["x"]

delete actually deletes it:

> var a = {x: 3};
> delete a.x;
> a.constructor.keys(a)
[]
1

This REPL from node should illustrate the difference.

> a={ x: 'foo' };
{ x: 'foo' }
> for (var i in a) { console.log(i); };
x
undefined
> a.x=undefined;
undefined
> for (var i in a) { console.log(i); };
x
undefined
> delete a.x;
true
> for (var i in a) { console.log(i); };
undefined
1

I'm sure you can see the difference between var o1 = {p:undefined}; and var o2 = {};.

In both cases, o.p will be undefined but in the first case, it's because that's the value and in the second case because there is no value.

delete is the operator that lets you get from o1 (or another object that has a value assigned to its p property) to o2 that way: delete o1.p;.

The reverse operation is made by simply assigning a value (undefined in this example but it could be something else) to the property o1.p = undefined;.

So no, they are not equivalent.


delete o.p; will

  • remove the property p from the object if it has one

  • do nothing otherwise

o.p = undefined; will

  • add a property p to the object if it doesn't have one yet and set its value to undefined

  • simply change the value of the property if the object already has it


From a performance perspective, delete is bad because it modifies the structure of the object (just like adding a new property if you haven't initialized it in the constructor).

Whereas setting the value to undefined releases the content as well but without forcing to modify the structure.

1

Object is simply a tree representation, that means, in memory the root points to various memory locations where keys of that object are stored. and that location points to another location where the actual value of that key is stored, or locations where the child keys are stored or locations where the array values are stored.

When you delete any key from an object using delete, actually it deletes link between that key and its parent object and the memory locations of key and its value are freed up to store another information.

When you try to delete any key by setting undefined as its value, then you are just setting its value, not deleting that key. That means that keys memory location is still linked with its parent object and the value if key is undefined.

Using undefined instead of using delete keyword is a bad practice, as it doesn't release memory location of that key.

Even if the key is not present, and you set it as undefined, then that key will get created with value undefined.

e.g.

var a = {};
a.d = undefined;
console.log(a); // this will print { d: undefined }

delete can't be worked with inherited properties because that property is not the part of that child object.

3
  • 1
    Note that newer engines prefer you don't delete keys, because when you do the engine needs to create a new class for it and update it wherever the "class" was referenced. Mar 3, 2016 at 12:20
  • 1
    @JuanMendes, Can you give any reference please. Mar 4, 2016 at 15:22
  • 4
    See Does using delete keyword affect v8 optimizations of an object? TL;DR as a general rule of thumb, using 'delete' makes thing slower. and developers.google.com/v8/design To reduce the time required to access JavaScript properties, V8 does not use dynamic lookup to access properties. Instead, V8 dynamically creates hidden classes behind the scenes. In V8, an object changes its hidden class when a new property is added. , and finally smashingmagazine.com/2012/11/… Mar 4, 2016 at 15:38

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.