Declare variable without var keyword and logical OR

Question

I get a strange behavior when declaring an object with the logical OR.

my_var = my_var || {}; // throws TypeError

If I add the var keyword

var my_var = my_var || {}; // returns empty object

Why is this? I can't seem to find an explanation. my_var is global scope, so why is var changing the behavior?

Answer 1

The first example tries to assign to a property on the global object named my_var by reading the value from an identifier called my_var (OR an empty object). However, the identifier my_var is not defined at that point, so it fails.

In the second example, due to how javascript variable hoisting works, the my_var variable is already declared, when you read from it by assign to it.

Also have a look at this example:

a = a; // fails, undeclared identifier
a = 0;

With var keyword it will work!

b = b; // succeeds allthough identifier undeclared?!
var b = 0;

This is because variable hoisting will turn it into this:

var b; // declaration of b hoisted to the top of scope
b = b;
b = 0;

Answer 2

when defining a variable without var, you're directly accessing the global object. That means, your Javascript engine trys to lookup my_var on the global object (window if you're in a browser). Since that property does not exist yet, your JS engine will throw.

That happens on the right side of your statement, when your engine trys to read a variable with the name my_var. assigning like

my_var = {};

would work tho. But accessing an identifier without var will cause the browser to lookup the scopechain. Since the variable object for the global object is the global object itself, the lookup procedure will end up nowhere ( = exception ).

By putting the var keyword infront, your js engine knows at parsetime that it has to declare a new variable with that identifier name. It actually does declare that variable with an undefined value (that is called "hoisting"). That means, using var will prematurely create a property in the current context with that name. So if that code is not located in any function or eval context, it'll create the property my_var on the window object.