Setting an object property to undefined

Question

On Chrome's and Node's console, I assigned the property of an object to have the value of undefined.

const foo = {
  bar: undefined
};

When I evaluate foo again, I expected it to give me an empty object ({}), but it returns with:

{
  bar: undefined
}

Are there any differences between { bar: undefined } and {}?

The reason I am asking is that this difference is failing my tests - I am expecting the result to be {}, but it's failing because the actual response is { bar: undefined }.

If it was { bar: null } I'd understand, since null is an actual value. But my understanding is that undefined means the property is undefined and thus not even a value.

"_Are there any differences between { bar: undefined } and {}?_" Yes, one is an empty object and the other is an object with 1 property with a value of undefined. — takendarkk, Dec 21 '17 at 17:47

score 3 · Accepted Answer · edited Dec 21 '17 at 17:59

3

Yes there is a difference. { bar: undefined } has a property called bar with the value undefined, while { } has no property named bar.

'bar' in { bar: undefined } === true

null and undefined are two different things but they are both values. I think your confusion stems from the fact that accessing a non-existent property also evaluates to undefined. I.e. ({}).bar === undefined.

However it is also valid to have an object with a property that does exist, but has the value undefined, and there are differences between those objects. As others have stated, you can delete a property from an object with the delete operator.

edited Dec 21 '17 at 17:59

dayuloli

16,205
16
71
126

answered Dec 21 '17 at 17:46

Paul

139,544
27
275
264

If it was `{ bar: null }` I'd understand, but I thought `undefined` means the property is _undefined_ and thus not even a value. – dayuloli Dec 21 '17 at 17:49
@dayuloli `null` and `undefined` are two different things but they are both values. I think your confusion stems from the fact that accessing a non-existent property also evaluates to `undefined`, EG. `({}).bar === undefined`. However it is also valid to have an object with a property that does exist, but has the value undefined, and there are differences between those objects. As others have stated, you can delete a property from an object with the [delete](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator. – Paul Dec 21 '17 at 17:54
@dayuloli The delete operator is the way to go if you want to remove a property from an object, rather than setting its value to `undefined`. – Paul Dec 21 '17 at 17:56
"I think your confusion stems from the fact that accessing a non-existent property also evaluates to `undefined`" <--- this is the source of my confusion yes. Thanks! – dayuloli Dec 21 '17 at 17:57

score 1 · Answer 2 · answered Dec 21 '17 at 17:45

Actually yes. For the first one you have defined property with name bar, but it's value is undefined, property exists. For the second one you have no property with name bar.

You can look at this example. Calling hasOwnProperty on object returns the result for the bar property. The property bar for foo1 exists and it does not depends on the properties value.

const foo1 = {
  bar: undefined
};

const foo2 = { };

console.log(foo1.hasOwnProperty('bar'));
console.log(foo2.hasOwnProperty('bar'));

Racil Hilan · Answer 3 · 2017-12-21T18:08:28.950

Of course there is a difference between the two. {} is an object that is empty, while { bar: undefined } is an object with a property bar that is undefined.

Note: I see your comments to the other answer. Yes, bar property is undefined, but it still exists. There is a difference between a variable or property being undefined or to not exist. Take this example:

var x;
console.log(x);

You will get undefined as a result, but can you say that the variable x doesn't exist? Of course it does exist. The same goes with the bar property, it exists and that makes the object different from an empty object {}.

So when you assign a property to undefined, you only remove its value, but the property stays. When you use delete, you remove the property itself and that's the difference.

score -1 · Answer 4 · answered Dec 21 '17 at 17:46

-1

Use the delete operator to delete a property entirely (so that hasOwnProperty(), for in, get*PropertyDescritor(), etc don't see it).

answered Dec 21 '17 at 17:46

SLaks

868,454
176
1,908
1,964

score -2 · Answer 5 · answered Dec 21 '17 at 17:51

undefined is a type of data, if you spend undefined or null the property bar will always be equal to what you spent and not a empty.

If what you need is an empty object you can do this:

const foo = {
  bar: new Object(null); // or empty, or false
};

or 

const foo = {
  bar: {}
};

Check in your console this:

({} === undefined); // this return false
(new Object() === undefined); // this return false

Setting an object property to undefined

5 Answers5