Understanding "undefined" in Javascript: how it works, how to safely check it, and is remapping possible

Question

I read about undefined in JavaScript, and now I'm not sure if I understand correctly. There is a lot of talk about how to check for undefined , but for some reason I could not find a mention of something that seems fundamental to me to understand how undefined works ( undefined is a property of the host object). It is for this reason that I must confirm that what I understand is correct, and if I am mistaken, I would appreciate clarifications.

Well, first of all, undefined is a property of the host object ( window in browsers), so it is quite legal to use it:

 window.undefined 

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

 if(someVar===undefined) {} 

Am I actually checking the window.undefined property that it contains, right?

So, this code below would be pretty stupid, as it will check someVar only on the string "undefined" and not on the type or property of the window object, right?

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

This will also be incorrect, as it will check the window.undefined property (no matter what it contains):

 if(typeof someVar===undefined) {} 

So, to summarize, the only correct and cross-browser way to check for undefined is to use typeof for example.

 if(typeof someVar==='undefined') 

Is it correct?

Also in ES5 window.undefined cannot be reassigned, but is it completely legal in older browsers?

This, however, can still be done evil if my understanding is correct:

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

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

Answer 1

You are almost right. Besides:

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

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

Even if the global variable undefined overridden, the value undefined still exists. There are several ways to get it, one of which is an empty function argument, the other 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 that in the example above, we are checking the value, not the type. Yes === checks the type and value, but if you replace === with == , the result will be the same.

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

Answer 2

That everything is fine, plus:

• you can use void 0 to reliably "generate" the real value of undefined (or non-a-value; its kind is zen)

• in a function, you can refer to an argument that, as you know, is not provided to get reliable undefined

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

  This second example is actually not the cleanest code in the world, but you will sometimes see it in general publicly accessible code files, tutorials, etc.

Answer 3

So if I do:

 if(someVar===undefined) {} 

I really check the window.undefined property, no matter what it contains, right?

Right

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

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

Right

This below is also not true, as it will be a window.undefined property (no matter what it contains):

 if(typeof someVar===undefined) {} 

Right

So, to summarize, the only correct and cross-browser way to check for undefined is to use a type, for example:

 if(typeof someVar==='undefined') 

Is it correct?

Yes, although it is error prone because you can enter this line incorrectly and not get an error (even in strict mode) to indicate an error.

So it’s better to name some method, especially if you are already using some kind of framework, for example. in AngularJS - angular.isUndefined

Also in ES5 window.undefined cannot be reassigned, but it is completely finished in older browsers right?

Right

This, however, can be done maliciously if I understand the law:

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

I think so.

Answer 4

So, to summarize, the only correct and cross-browser way to check for undefined is to use typeof, for example:

if(typeof someVar==='undefined')

No, a direct comparison of somevar === undefined fine.

There are many global variables that can be overwritten or obscured, which can lead to code breakdowns. There is no way to protect them all, except to simply prevent bad code.

---

What is nice about direct comparison (except that it is shorter and cleaner) is that it should be more natural and intuitive, while people often get different syntax wrong. As a result, they accidentally use other examples you cited:

 if (somevar === 'undefined') if (typeof somevar === undefined) 

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

---

In addition, you will see the following:

 if (typeof somevar === 'undefiend') 

This is much more subtle and difficult to detect when it is surrounded by a bunch of other code. Again, this is a common mistake.

---

Perhaps the worst thing you see is:

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

What is wrong with that? Well, if somevar not declared, we now created an implicit global variable. It can be very bad. If we made a simple comparison, we would be warned about the problem with a ReferenceError.