Understanding “undefined” in Javascript: how it works, how to safely check against it and whether reassignment is possible

Question

I’ve been reading about undefined in JavaScript and now I am not sure if my understanding is correct. There is a lot of talk around how to check for undefined but somehow I couldn’t find any mentioning of something that to me seems fundamental to understanding of how undefined actually works (undefined being property on host object). This is the reason for this question, I need to confirm that what I understand is correct and if I’m wrong I would appreciate clarification.

Okay, first of all, undefined is property on host object (window in browsers) so it’s perfectly legal to use:

window.undefined

The value of this property is type "undefined". This is one of the JavaScript types along with Object, String, Number and Null. So if I do:

if(someVar===undefined) {}

I’m actually checking against window.undefined property, whatever it contains, is that right?

So this code below would be pretty dumb as this would check someVar only against the string "undefined", not the type nor the property of the window object, right?

if(someVar==='undefined') {}

This below would be also incorrect as this would check against the window.undefined property (whatever it contains):

if(typeof someVar===undefined) {}

So, to sum it up, the only proper and cross-browser way to check for undefined is to use typeof e.g.:

if(typeof someVar==='undefined')

Is that right?

Also in ES5 window.undefined cannot be reassigned but it’s perfectly legal in older browsers right?

This however can still be done and is evil if my understanding is right:

(function() { 
  var undefined=66;
  alert(undefined);
})()

I would appreciate clarification if I misunderstood how undefined works in JavaScript.

Answer 1

You're almost correct. Except for this:

The value of [window.undefined] is type "undefined". This is one of Javascriupt types along with Object, String, Number, and Null

There are 3 undefined in javascript. The global variable undefined, the value undefined and the type undefined.

Even if the global variable undefined is overridden, the value undefined still exists. There are several ways to get it one of which is an empty argument to a function, another is a variable declaration without assigning anything:

// Note: Probably need older browsers to assign to undefined:
window.undefined = 1;

(function(foo){ // the value of foo is undefined;
    var bar;    // the value of bar is undefined;

    return [foo === bar, foo === window.undefined]; // returns [true,false]
})();

Note carefully that in the example above we're checking the value, not the type. Yes === checks type and value but if you replace === with == the result would be the same.

The value undefined has type undefined ('Undefined' in the spec and documentation but typeof returns 'undefined') and type undefined is only valid for the value undefined.

Answer 2

So to sum it up, the only proper and cross-browser way to check for undefined is to use typeof e.g.:

if(typeof someVar==='undefined')

No, the direct comparison somevar === undefined is fine.

There are any number of global variables that can be overwritten or shadowed that will break code. There's no way to protect against them all, except to simply not allow bad code.

---

What's nice about the direct comparison (aside from being shorter and cleaner) is that it's must more natural and intuitive, whereas people often get the other syntax wrong. They end up accidentally using the other examples you gave:

if (somevar === 'undefined')

if (typeof somevar === undefined)

These are very common errors, and are much more common than people redefining undefined.

---

Furthermore, you'll see things like this:

if (typeof somevar === 'undefiend')

This is much more subtle, and is hard to spot when surrounded by a bunch of other code. Again, it's a common mistake.

---

Probably the worst is when you see this:

if (typeof somevar === 'undefined')
    somevar = "foobar";

What's wrong with that? Well, if somevar had not been declared, we've now created an implicit global variable. This can be really bad. If we had done a simple comparison, we would have been alerted to the problem with a ReferenceError.

Answer 3

That's all fine, plus:

• you can use void 0 to reliably "generate" the real undefined value (or not-a-value; it's kind-of zen)

• in a function, you can reference an argument that you know isn't supplied to get a reliable undefined

  (function( undefined ) {
    // ...
  })();
  

  This second example is not really the clearest code in the world, but you'll see it sometimes in common public codebases, tutorials, etc.

Answer 4

So if I do:

if(someVar===undefined) {}

I'm actually checking against window.undefined property whatever it contains is that right?

Right.

So this code below would be pretty dumb as this would check someVar only against the string undefined, not the type nor the property of window object right?

if(someVar==='undefined') {}

Right.

This below would be also incorrect as this would check against the window.undefined property (whatever it contains):

if(typeof someVar===undefined) {}

Right.

So to sum it up, the only proper and cross-browser way to check for undefined is to use typeof e.g.:

if(typeof someVar==='undefined')

Is that right?

Yes, though it is error-prone because you may mis-type that string and get no error (even in strict mode) to indicate the mistake.

So it's better to call some method, especially if you're already using some framework e.g. in AngularJS - angular.isUndefined

Also in ES5 window.undefined cannot be reassigned but its perfectly legal in older browsers right?

Right.

This however can still be done and is evil if I my understanding is right:

(function() { 
var undefined=66;
alert(undefined);
})()

I believe so.