Home | « Previous | Next » |
Hoisting
- Automatic hoisting of variable declaration to the top of its enclosing scope.
- Variables as well as functions are hoisted.
- Anonymous functions could have issues with hoisting.
Variable Hoisting
In snippet 1, the variable foo is hoisted in global scope. It can be visualized as mentioned in snippet 2
snippet 1
"use strict"
console.log(foo); // undefined
var foo = 1;
snippet 2
"use strict"
var foo;
console.log(foo);
foo = 1;
Function Hoisting
In snippet 3, the function moo is hoisted in global scope. It can be visualized as mentioned in snippet 4
snippet 3
"use strict"
moo(); // prints moo
function moo() {
console.log('moo');
}
snippet 4
"use strict"
function moo() {
console.log('moo');
}
moo();
Issues with Anonymous Function Hoisting
Snippet 5 can be visualized as mentioned in snippet 6. Since we cannot invoke a function on undefined. We will get an error.
snippet 5
"use strict"
moo(); // error
var moo = function() {
console.log('moo');
}
snippet 6
"use strict"
var moo;
moo();
moo = function() {
console.log('moo');
}
moo();