JavaScript variable undefined vs not defined

Question

I have an HTML page with the following JavaScript attached.

alert(box);
box = "Thinking outside the box";

In the console I get "Uncaught ReferenceError: box is not defined"

when I change it to:

alert(box);
var box = "Thinking outside the box";

The alert gets called and shows undefined. I need to be able to explain this, I have a vague idea of why this happens. I know that when I use var, JavaScript knows the variable is there before the alert is executed, but has not necessarily assigned a value to it?? Am I way off here? Need some help understanding this.

Answer 1

When you define a variable with var, the declaration of the variable is "hoisted" to the top of the scope and thus the variable is defined for the entire scope. The initialization of the variable (assigning it's initial value) remains at the same location in the code.

So, in your second example, when you do alert(box), the variable box has already been declared because of the hoisted var statement. Your second example:

alert(box);
var box = "Thinking outside the box";

is basically equivalent to this (the declaration of the box variable is hoisted to the top of the scope):

var box;
alert(box);
box = "Thinking outside the box";

This makes the box variable declared (though not initialized) before your alert(box) statement and thus you get a result that is consistent with the variable being declared, but having no value yet (the alert() reports undefined which is what happens when the variable exists, but is not yet initialized).

Your first example does not use var and thus there is no hoisting so at the point where you do alert(box), there is no variable at all named box and thus you get the uncaught reference error.

There are many, many posts here on SO that describe the details of hoisting. You can see a long list of them here: https://stackoverflow.com/search?q=javascript+variable+hoisting where you will find further explanation of variable hoisting.

Note: function declarations are also hoisted so some of the posts you find will be about function declarations rather than variable declarations, though the concept is pretty much the same.

Answer 2

This has to do with variable hoisting. What this means is that, variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it is declared.

When you do the following:

alert(box)
var box = "Thinking outside the box"

This is implicitly understood as:

var box;
alert(box);
box = "Thinking outside the box"

In your first case, you have no variable declarations, and hence is not hoisted, at at that point box is undefined

Why does this happen?

As Stoyan Stefanov explains in his book "JavaScript Patterns", hoisting is a result of the implementation of the JavaScript interpreter:

For completeness, let’s mention that actually at the implementation level things are a little more complex. There are two stages of the code handling, where variables, function declarations, and formal parameters are created at the first stage, which is the stage of parsing and entering the context. In the second stage, the stage of runtime code execution, function expressions and unqualified identifiers (undeclared variables) are created. But for practical purposes, we can adopt the concept of hoisting, which is actually not defined by ECMAScript standard but is commonly used to describe the behaviour.

- Stoyan Stefanov, "JavaScript Patterns"

As a side read, linking this article from Safe Shepherd.