Strange variable scope issue

Question

I'm not quite sure why it is happening and it would be great if someone could explain this to me.

So i got the following code:

var text = 'yes';
(function f() {
    alert(text);
})();

And it alerts 'yes' as expected. But if I expand it like this:

var text = 'yes';
(function f() {
    alert(text);
    var text = 'no';
})();

I would pretty much expect this to alert 'yes' too and then overwrite the text variable in the local scope. But instead it alerts undefined.

This is tested in current Chrome and Firefox so this seems to be a wanted behavior?!

Felix Kling · Accepted Answer · 2012-08-17 12:16:23Z

6

Variable (and function) declarations are hoisted to the top of the scope. So your code is equivalent to:

var text = 'yes';
(function f() {
    var text;    // shadows the outer variable; initialised with `undefined` 
    alert(text); // still undefined
    text = 'no'; // now it has the value 'no'
})();

answered Aug 17, 2012 at 12:16

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

4 Comments

bardiir Over a year ago

That was pretty much what I thought too whn thinking about the issue from a compiler viewpoint, but it was somewhat unexpected at first. Is this defined in the ECMAScript/Javascript definition?

Felix Kling Over a year ago

Yes, you have to dig through it though. es5.github.com/#x10.4.3, es5.github.com/#x10.2.1.1 and es5.github.com/#x10.5 (especially this one) seem to be relevant.

bardiir Over a year ago

Ok thanks. For everyone reading this later: it's called lexical scope :)

jAndy Over a year ago

@bardiir: that behavior has no direct relationship with the lexical scope nature of ES. That just means that free (out of scope) variables are searched in parent-execution context objects (variable objects es3 or lexical environments in es5) in lexical order. The issue here really is that function and variable declarations are just interpretated at parsing-time (before evaluating time) and get always treated as if they were declared at the very first line.

Curtis · Accepted Answer · 2012-08-17 12:16:21Z

1

You're declaring it as a new variable in that scope, so it won't override. Try:

var text = 'yes';
(function f() {
    alert(text);
    text = 'no';
})();

Demo

answered Aug 17, 2012 at 12:16

Curtis

104k69 gold badges280 silver badges359 bronze badges

Collectives™ on Stack Overflow

Strange variable scope issue

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related