Takehiko Abe wrote:
[snip]
It appears to me that, without 'var' keyword, 'i' behaves like a
global variable inside the function.
Indeed it does.
I searched on the net regarding the usage of 'var' and found that
some docs says 'var' is optional, [...]
The var keyword isn't necessary when creating a global variable.
Simply assigning to an identifier that doesn't appear in the scope
chain (explained later) will create and initialise a property on the
global object. However, the var keyword is mandatory when creating
local variables. I'm of the opinion that the var keyword should always
be used, whether a local or a global variable is being declared.
I couldn't find any info about the possible difference when 'var'
is ommited and when 'var' is used.
A variable declaration behaves in two ways, based on where it is
encountered. A declaration at global scope creates a property on the
global object, whereas a declaration within a function creates a
property on the variable object of that function's execution
context[1] (in other words, a local variable).
When an identifier is encountered, the ECMAScript implementation must
resolve the location of that identifier. It does this by searching the
scope chain - a list of objects beginning at the global object, and
extended through the creation of functions[2]. If the identifier
cannot be found in the variable object (so it's not a local variable),
the next object in the scope chain is searched. If that object doesn't
contain the identifier, the next object is searched. This continues
until finally the global object is reached. If it's still not found,
then either a new property is created on the global object (for
assignments), or an error occurs (for value look-ups).
I appreciate if someone can shed a light on the difference.
Hopefully, there's something useful in there. The first three
paragraphs contain most of the information you're looking for. The
paragraph above, and the footnotes below, go into much more depth and
complete the description.
Mike
[1] Whenever a function is called, a new execution context is created.
The execution context can be thought of as the state of that
function as it holds various bits of information used during
execution, including: the scope chain, used to resolve
identifiers; the activation/variable object, containing the
arguments object, formal arguments (parameters) defined by the
function, local variables, and nested function declarations; and
the this operator value.
[2] When functions are declared, an internal [[Scope]] property is
created. When the function is called, and its execution context
entered, the activation/variable object is added to the [[Scope]]
property, and this chain of objects becomes the scope chain for
the function.
A function declared at global scope will only have the global
object in its [[Scope]] property. This means that only the
local variables, functions, and formal arguments of its
activation/variable object, and the properties of the global
object will be accessible.
A function declared within another function will have the
complete scope chain of the outer function in its [[Scope]]
property. This will include not only the global object, but
also all of the local variables, functions, and formal
arguments of its parent. For example,
function A(arg) {
var local = 'bar';
function B() {
alert(arg); // 'foo'
alert(local); // 'bar'
}
B();
}
A('foo');
When A is called with argument 'foo', the ECMAScript
implementation will create the function object for B, and the
variable, local, with value 'bar'. When B is called, it will
have access to these local variables as the activation/variable
object of A is part of its scope chain.
