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;