Expecting undefined in Javascript

Question

I was seeing some Javascript code and I stumbled upon something like this:

function() {
    if(true) {
        var a = 5;
    }
    alert(a);
}

I was pretty sure this would output undefined but it didn't ? Can someone tell me why?

@pstenstrm — There's only one function involved here, and no statements outside it. Closures are irrelevant. — Quentin
– Quentin, Commented Jun 5, 2014 at 15:47
@War10ck As I mentioned in the question, I stumbled upon something like this, not exactly this. The point is I saw a variable being used outside the scope of which it was defined. — John Doherty
– John Doherty, Commented Jun 5, 2014 at 15:48
@pstenstrm This has nothing to do with closures. This question has everything to do with how scoping is different in JavaScript (function-level) as compared to Java or C# (block-level). — Satwik Nadkarny
– Satwik Nadkarny, Commented Jun 5, 2014 at 15:55

Quentin · Accepted Answer · 2014-06-05 15:43:43Z

14

JavaScript has function level scope, not block level scope.

The var statement is hoisted so your code is equivalent to:

function() {
    var a;
    if(true) {
        a = 5;
    }
    alert(a);
}

If JavaScript had block level scope, then it still wouldn't output undefined. Since a would be undeclared in the alert statement, you would trigger a reference error.

answered Jun 5, 2014 at 15:43

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ian Clark Over a year ago

Also this is a syntax error, as it's an anonymous function not called.

Ruan Mendes Over a year ago

@IanClark That's besides the point, this is probably part of a full statement.

Ian Clark Over a year ago

Though I thought I'd mention as they didn't understand hoisting / scoping :)

Satwik Nadkarny Over a year ago

For every Java/C# developer learning JavaScript, this 'scope' question is "A rite of passage".

Travis J · Accepted Answer · 2014-06-05 15:45:22Z

3

The reason this works is a result of what is called hoisting. Hoisting moves the declaration of the variable to the top of the scope. So your function really looks like this:

function() {
 var a;
 if(true) {
  a = 5;
 }
 alert(a);
}

"Because 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's declared. This behaviour is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code." - var MDN

answered Jun 5, 2014 at 15:45

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

1 Comment

Satwik Nadkarny Over a year ago

+1 Upvote. This is a complete answer. Function-level scoping in collaboration with hoisting is the key reason. Well explained!!!

Ruan Mendes · Accepted Answer · 2014-06-05 15:43:53Z

2

Variable definitions are moved to the top of the function (variable hoisting); there are no block level variables.

The compiler changes your code to

function() {
    var a;
    if(true) {
        a = 5;
    }
    alert(a);
}

answered Jun 5, 2014 at 15:43

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

Comments

Amir Popovich · Accepted Answer · 2014-06-05 15:44:14Z

2

JS doesn't have block scopes just function\global scopes.
In your case the var is declared with no value at the top of the function and then is assigned.

Here's a good tutorial on scopes.

answered Jun 5, 2014 at 15:44

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

1 Comment

avcajaraville Over a year ago

Exactly, this is why.

Collectives™ on Stack Overflow

Expecting undefined in Javascript

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related