Order of hoisting in JavaScript
Although the order was fixed by the specification, as the accepted answer points out, that order really is not that important.
var
declarations are hoisted, but not their initialisation (if there is one). Avar
declaration is without effect if the name is already taken by afunction
or othervar
declaration.function
definitions are hoisted -- not only declaring the name, but also their value, i.e. the function.
So the following two pieces of code:
(function () {
console.log(typeof a);
var a = 1;
function a() { }
})();
and:
(function () {
console.log(typeof a);
function a() { }
var a = 1;
})();
... translate to:
(function () {
function a() { }
var a;
console.log(typeof a);
a = 1;
})();
and respectively:
(function () {
var a;
function a() { }
console.log(typeof a);
a = 1;
})();
The latter two are the same thing really. If the engine processes the hoisted var
declaration first, then a
is first undefined
but then immediately overwritten as function. If on the other hand the function
definition is processed first, then the var
declaration has no effect. In both scenarios the outcome is the same.
Functions are hoisted first, then variable declarations, per ECMAScript 5, section 10.5 which specifies how hoisting happens:
We first have step 5 handling function declarations:
For each FunctionDeclaration f in code, in source text order do...
Then step 8 handles var
declarations:
For each VariableDeclaration and VariableDeclarationNoIn d in code, in source text order do...
So, functions are given higher priority than var
statements, since the later var
statements cannot overwrite a previously-handled function declaration.
(Substep 8c enforces the condition "If varAlreadyDeclared is false, then [continue...]" so extant variable bindings are not overwritten.)
You can also see this experimentally:
function f(){}
var f;
console.log(f);
var g;
function g(){}
console.log(g);
Both log
calls show the function, not an undefined
value.