Fun with Javascript! Beginners Undefined Values.

Hey, all. I am sitting in a coffee shop, telling myself I should be reading. Instead, I will write a list of fun 'undefined' values games in Javascript. (** probably more beneficial to beginners than anything **)

Let's get going!

What do you think the return value of this code would be?

(function(){})
--> // function anonymous() 

So it returns an anonymous function. Why is that?
Because we are grabbing the value with the '()' expression operator.

---

This example below is definitely not valid either. Javascript has no idea what you are trying to do. You are not assigning a value, or invoking a function.

function(){}
--> Uncaught SyntaxError: Unexpected token (
       at Object.InjectedScript._evaluateOn            (<anonymous>:895:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)
at Object.InjectedScript.evaluate (<anonymous>:694:21)

So that doesn't work. What if we try to run the evaluated function?

(function(){})();
--> undefined
// or this
function ex(){};
ex();
--> undefined
// definitely NOT this
function ex(){}();
--> Uncaught SyntaxError: Unexpected token )
at Object.InjectedScript._evaluateOn (<anonymous>:895:140)
at Object.InjectedScript._evaluateAndWrap (<anonymous>:828:34)
at Object.InjectedScript.evaluate (<anonymous>:694:21)

That's pretty simple to explain because when you run a function in the console, it will display the return value. No return value in an empty function. So undefined is the response.

---

So that leads me to my game.
What do you think the result of this would be?

(function(){}) === (function(){})

Remember

(function(){})
--> // function anonymous() 

If you thought it would return true, you would be wrong.

Though, these are both empty anonymous functions that look exactly the same and return the same value, no two functions are alike.

Now, were you to execute those two functions, you know that they have an 'undefined' return value. So when you compare the two:

(function(){}()) === (function(){}())
--> // true

When you evaluate the expression of an anonymous function, then run it with a second set of parenthesis, you will get the undefined value we talked about before. So, you are actually comparing:

undefined === undefined
--> true
// or 
(function(){})() === void 0;
--> true

Really, the point I am trying to make is that Javascript is really weird. Like super duper weird. If you rely on these games, you will be burned.

For example, older or foreign browsers might have a different undefined value. So, you can't simply test for "undefined" or in older browsers undefined is not valid at all.

A solid way to make sure you are comparing undefined values correctly is (depending on what you are making) to use the 'void' keyword.

In your applications namespace (Or globally, if you don't abuse it.) Create a variable that you would call undefined. Then cast that as something every browser will always parse as undefined.

 // super unlikely but possible edge case
 (function(){})() === undefined
 --> false 

// instead, try this.
var undef = void 0;
(function(){})() === undef
--> true

This could only happen if the value of undefined was described weirdly (undefined == 'not a thing puny human') in a browser engine. Likely, no site would work well on it anyway, but the option is there for you.

Ok. This post got really long really quickly. I hope it was sensical. If you liked it, make sure you click that big red arrow at the top of the page!

Also, if you are interested in more of these weird Javascript foo posts, you should really check out 'Javascript Allonge.' I am not affiliated in any way, but I think the book is a super good read, especially for those looking to gain mastery in JS.