Why JavaScript Variable Declaration at Console Results in "Undefined"

When declaring a variable in the JavaScript console using the syntax var a;, it prints "undefined." This behavior can be surprising and is often addressed in Stack Overflow posts. However, these discussions fail to fully explain why this occurs.

The console's behavior is a direct result of the way JavaScript evaluates expressions. When evaluating the statement var a;, JavaScript considers it an expression on its own and returns its result, which is indeed "undefined."

It is more puzzling why the console also prints "undefined" when declaring a variable with an initial value, such as var a = 3. Surprisingly, all variable declaration statements in JavaScript (both var and function) return "undefined" if there is another statement with a "real" result.

For example:

> var a = 3;
undefined

> var a = 3; a = 4;
4

> var a = 3; a = 4; var a = 5; function f() {};
4

This behavior is rooted in the eval statement, which, according to the ECMAScript specification:

• Returns "undefined" if the completion value of the evaluated program is empty.

The evaluation of the var a = 4 statement returns (normal, empty, empty), which satisfies the criteria for returning "undefined."

However, the eval also specifies that if the completion value of the evaluated program is not empty, then the value of the last statement is returned. In the last example, a = 4 is the last statement, so its value (4) is returned.

In summary, JavaScript's console prints "undefined" for variable declarations because these declarations return "undefined" when evaluated as expressions. This behavior can be confusing, particularly when assigning initial values to variables, but it stems from the underlying evaluation mechanisms of JavaScript expressions and statements.