Difference between undefined and not being defined in Javascript

Question

See http://jsfiddle.net/FDhQF/1/ for a trivial example.

What's the difference between something being undefined and something not being defined in Javascript? For instance, trying to access a property for an object (effectively, trying to access a variable) that isn't defined will return undefined. But you can also set something = undefined. When you do that, trying to access it still return undefined, but the pointer is still there. An example, as above, is how iterating over an object still goes over the property that you've (re)declared as undefined. It seems like there are two different sorts of undefined. Can anyone shed some light on the situation?

Answer 1

Both, accessing a property that isn't defined on an object and a property that contains the primitive undefined value, will return you undefined.

For example:

var obj = {   a: undefined };  obj.a; // undefined obj.b; // undefined 

The difference is that a is an own property, and b isn't:

obj.hasOwnProperty('a'); // true obj.hasOwnProperty('b'); // false 

In the first case a is an own property, even if it contains undefined as its value. In the second case, b is not an own property, accessing obj.b will look for a property named b, all way up in the prototype chain.

When the prototype chain ends (when it reaches an object with a null [[Prototype]]), the property lookup ends and undefined is explicitly returned.

You should know that the hasOwnProperty method checks only if the property physically exist on the object (own properties), but we have also inherited properties, for that case we can use the in operator, for example:

function Test () {} Test.prototype.a = 'foo'; // instances of Test will inherit from Test.prototype  var obj = new Test(); // { a="foo",  b="bar"} obj.b = 'bar';  obj.hasOwnProperty('a');  // false 'a' in obj;               // true obj.a;                    // 'foo'  obj.hasOwnProperty('b');  // true 

As you can see, obj inherits from Test.prototype, and the a property is not an own property, but it is available through the prototype chain. That's why hasOwnProperty returns false and the in operator returns true.

You can see how internally properties are resolved by the [[Get]] internal operation

Notes:

• Accessing undefined as an identifier is not considered to be safe on ECMAScript 3 (the most widely implemented version of the language standard), because instead of being a language keyword (such as null for example) is just a property of the global object, and it is writable on this version of the Spec., meaning that if someone replaces its value (e.g. window.undefined = 'LOL';) , it will break your code.

The typeof operator as @strager mentions can be used instead, for example:

if (typeof obj.prop == 'undefined') { /*....*/ } 

This operator returns always a string (it's safe to use == :), and its value depends of the type of its operand, the possible values are described here.

Another common way to solve this is to declare your own undefined variable, available on the scope of your functions, for example, some libraries use the following pattern:

(function(undefined) {   // code here })(); 

The function has an argument named undefined, and it is executed immediately without passing any value to it (the last pair or parens make the invocation).

Maybe is worth mentioning that the undefined global property was finally described on ECMAScript 5 as non-writable (immutable, as well non-enumerable and non-configurable -non deletable-).

• Using the hasOwnProperty method directly from an object instance is also not considered as safe, because if some object has a property with the same name, the original method will be shadowed. For example:

  var obj = { hasOwnProperty: function () { /* evil code :) */ } }; 

If you call:

    obj.hasOwnProperty('prop');  

The method defined on the object will be executed (and you wouldn't want this since you know exactly which method you want to invoke...), because it shadows the one from the Object.prototype, however it can be safely invoked by:

    Object.prototype.hasOwnProperty.call(obj, 'prop');