Why Does JavaScript Variable Declaration at Console Results in "Undefined" Being Printed

Why does JavaScript variable declaration at console results in undefined being printed?

It prints the result of this expression - which is undefined. And yes, var a is a valid expression on its own.

Actually, you should rather be amused by why console prints undefined when you write var a = 3 or something like this. It also prints undefined if function anyFunctionName() {} statement is processed. In fact, all the var and function declaration (!) statements seem to be ignored if there's another statement with some 'real' result:

>>> var a = 3;
undefined

>>> var a = 3; a = 4;
4

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

Now, I suppose the real reason behind is behaviour of eval statement, as described here:

• Let result be the result of evaluating the program prog.
• If result.type is normal and its completion value is a value V, then return the value V.
• If result.type is normal and its completion value is empty, then return the value undefined.

So now the question is, what does var a = 4 statement return? Guess what: it's not 4.

The production VariableStatement : var VariableDeclarationList; is
evaluated as follows:

• Evaluate VariableDeclarationList.
• Return (normal, empty, empty).

Now the most interesting part: what happened in the last example, why 4 is the result? That's explained in this section:

The production Program : SourceElements is evaluated as follows:

• Let result be the result of evaluating SourceElements.

[...]

The production SourceElements : SourceElements *SourceElement* is evaluated as follows:

• Let headResult be the result of evaluating SourceElements.
• If headResult is an abrupt completion, return headResult.
• Let tailResult be result of evaluating SourceElement.
• If tailResult.value is empty, let V = headResult.value, otherwise let V = > tailResult.value.
• Return (tailResult.type, V, tailResult.target)

Both function f() {} and var a = 5 statements' return values were (normal, empty, empty). So the script ended up with giving out the result of the first statement (starting from the script's end, so technically it's the last one) that's not (normal, empty, empty). That is the result of a = 4 assignment statement - which is 4.

---

P.S. And now for some icing on the cake: consider the following:

>>> function f() {}
undefined

>>> (function f() {})
function f() {}

The difference is quite subtle: the first input is treated as a Function Declaration statement, which, according to this rule...

The production SourceElement : FunctionDeclaration is evaluated as
follows:

• Return (normal, empty, empty).

... will eventually produce undefined when eval-ed, as we already know.

The second input, however, is treated as a Function Expression, which is evaluated to the function itself. That means it'll be passed through eval and eventually returned to the console (in its format).

Why does the console print undefined when I assign a variable?

TL;DR: It does not.

You can see content of your variable test, il will output the same thing as before. In fact it is the variable assignement that returns the undefined you see here.

For instance:

var test = 'Hello' // => undefined
test // => 'Hello'

Another case is printing your variable with console.log. If you do so, the return value will be undefined but the output will be your variable content (Hello here).

console.log(test) // return: undefined / print: Hello

Why does console.log say undefined, and then the correct value?

The console will print the result of evaluating an expression. The result of evaluating console.log() is undefined since console.log does not explicitly return something. It has the side effect of printing to the console.

You can observe the same behaviour with many expressions:

> var x = 1;
undefined;

A variable declaration does not produce a value so again undefined is printed to the console.

As a counter-example, expressions containing mathematical operators do produce a value which is printed to the console instead of undefined:

> 2 + 2;
4

Why this expression is var a = 3, b = a = typeof b; giving undefined?

What really happens here is:

var a = 3;    // so a gets a value.
var b;        // var b exists but is undefined.
a = typeof b; // a receives type of b, which is undefined at this time
b = a;        // b gets the value from a

Why does the JS console return an extra undefined?

The console outputs the return value of the function you're executing.

See what happens if you put a return statement in your function e.g.

return function () {
    console.log(msg, name);
    return "If you run me from console you'll see this line";
}

---

Related Topics