Weird variable scope

[Joe Attardi]

Over the weekend I attended a session on JavaScript at the No Fluff
Just Stuff conference and learned an interesting quirk that I wanted to
ask a question about..

Take this code:

x = 5;

function foo() {
alert(x);
var x = 10;
alert(x);
}

foo();

The first alert will display 'undefined', and the second will display
10. Apparently JavaScript recognizes the 'var x = 10' declaration
inside foo() even before that line is reached - it spots the
declaration, but not the initialization to 10. Only after x is set to
10 and the second alert is reached will the 10 be displayed.

My question is... is there any way from this code to access the global
x variable (5) from within foo()?

[web.dev]

Joe Attardi wrote:

Over the weekend I attended a session on JavaScript at the No Fluff
Just Stuff conference and learned an interesting quirk that I wanted to
ask a question about..

Take this code:

x = 5;

function foo() {
alert(x);
var x = 10;
alert(x);
}

foo();

The first alert will display 'undefined', and the second will display
10. Apparently JavaScript recognizes the 'var x = 10' declaration
inside foo() even before that line is reached - it spots the
declaration, but not the initialization to 10. Only after x is set to
10 and the second alert is reached will the 10 be displayed.

My question is... is there any way from this code to access the global
x variable (5) from within foo()?

Try the following:

alert(window.x) ;

or

alert(window["x"]);

[Tony]

Joe Attardi wrote:

Over the weekend I attended a session on JavaScript at the No Fluff
Just Stuff conference and learned an interesting quirk that I wanted to
ask a question about..

Take this code:

x = 5;

function foo() {
alert(x);
var x = 10;
alert(x);
}

foo();

The first alert will display 'undefined', and the second will display
10. Apparently JavaScript recognizes the 'var x = 10' declaration
inside foo() even before that line is reached - it spots the
declaration, but not the initialization to 10.
No - it returns that x is undefined. That is, 'x' has not yet been
defined. You define it on the following line.
Only after x is set to
10 and the second alert is reached will the 10 be displayed.
Because now, x has been defined.
My question is... is there any way from this code to access the global
x variable (5) from within foo()?

Declare the global x variable as:
var x = 5;

[Michael Winter]

On 15/03/2006 21:44, Joe Attardi wrote:

[snip]

x = 5;
All variables, including globals, should be explicitly declared using a
var statement.
function foo() {
alert(x);
var x = 10;
alert(x);
}

foo();

The first alert will display 'undefined', and the second will display
10. Apparently JavaScript recognizes the 'var x = 10' declaration
inside foo() even before that line is reached - it spots the
declaration, but not the initialization to 10. Only after x is set to
10 and the second alert is reached will the 10 be displayed.
Variable instantiation occurs before code execution begins, as described
in section 10.1.3 Variable Instantiation, ECMA-262 3rd Ed.[1]

Simply put, when the foo function is called, formal arguments, function
declarations, and variable declarations are processed to create local
variables. After that, execution begins with variable initialisation
occurring as assignments are evaluated.
My question is... is there any way from this code to access the global
x variable (5) from within foo()?

Yes, by access the global variable as a property of the global object.

With the code as-is, one can use the this operator to reference the
global object:

var x = 5;

function foo() {
alert(this.x); // 5
alert(x); // undefined
var x = 10;
alert(this.x); // 5
alert(x); // 10
}
foo();

However, as the value of the this operator can change depending on how a
function is called, an alternative may be necessary. Another option is
to use some variable that refers to the global object. The window
variable suffices in most cases, though I prefer to use my own:

var global = this,
x = 5;

function foo() {
alert(global.x) ;
alert(x);
var x = 10;
alert(global.x) ;
alert(x);
}
foo();

Mike
[1] <http://www.ecma-international.o rg/publications/standards/Ecma-262.htm>

--
Michael Winter
Prefix subject with [News] before replying by e-mail.

[Joe Attardi]

Tony wrote:

No - it returns that x is undefined. That is, 'x' has not yet been
defined. You define it on the following line. Not defined, but it has been declared. Otherwise, if no variable called
x was found at that point in foo, it would move up to the parent
environment (in this case the global scope) and find an x there. The
fact that it doesn't go up to the global scope means that at the first
call to foo(), the function DOES know about x. It just doesn't know its
value yet because it hasn't been defined. If you remove the var x = 10,
then both alerts refer to the x in the global scope (5).
Declare the global x variable as:
var x = 5;

That didn't work, because it's still finding something declared as x in
a more inner scope (the local var x within foo).

[Joe Attardi]

> Yes: alert(window.x) ;
That did it. Thanks!

By the way, "before that line is reached" isn't quite right.
Javascript functions are parsed before they are executed.
During that process, local storage for "x" is allocated because
it is declared as "var".

You're right. It was bad wording on my part. What I meant was more to
the effect of the instruction pointer, program counter, or whatever the
equivalent in JavaScript is, arrives at that line. Before that point,
the local storage is allocated (as you mentioned) but the value of 10
has not yet been assigned.

[Thomas 'PointedEars' Lahn]

web.dev wrote:

Joe Attardi wrote:

My question is... is there any way from this code to access the global
x variable (5) from within foo()?

Try the following:

alert(window.x) ;

or

alert(window["x"]);

No, don't. We have discussed this ad nauseam before.
PointedEars

[Thomas 'PointedEars' Lahn]

Joe Attardi wrote:

Yes: alert(window.x) ;

That did it. Thanks!

alert(this.x);

(if called as method of the Global Object) or

var _global = this, x = 42;

function foo()
{
alert(_global.x );
}

(no matter how it is called)

is much better. The host-defined `window' property of the Global Object
usually refers to the owning (Global) Object. But there does not need to
be such a host-defined property, that depends entirely on the environment
the script runs in.
PointedEars

[Matt Kruse]

Thomas 'PointedEars' Lahn wrote:

The host-defined `window' property of the Global
Object usually refers to the owning (Global) Object. But there does
not need to be such a host-defined property, that depends entirely on
the environment the script runs in.

And in a browser context (which is assumed on this group) that is always
true.
Using 'window' as the global object works in all browsers that support JS.

Writing:

var global = this;
or
var __GLOBAL = this;
etc

creates an unnecessary global variable which may actually be over-written by
any other code running on the same page.

Using 'window' as the global object for scripting in a browser environment
is the better practice, IMO.

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

[Thomas 'PointedEars' Lahn]

Matt Kruse wrote:

Thomas 'PointedEars' Lahn wrote:

The host-defined `window' property of the Global
Object usually refers to the owning (Global) Object. But there does
not need to be such a host-defined property, that depends entirely on
the environment the script runs in.

And in a browser context (which is assumed on this group) that is always
true.

No, it is not.
PointedEars