JavaScript Scope Hoisting
Example
What is hoisting?
Hoisting is a mechanism which moves all variable and function declarations to the top of their scope. However, variable assignments still happen where they originally were.
For example, consider the following code:
console.log(foo); // → undefined
var foo = 42;
console.log(foo); // → 42
The above code is the same as:
var foo; // → Hoisted variable declaration
console.log(foo); // → undefined
foo = 42; // → variable assignment remains in the same place
console.log(foo); // → 42
Note that due to hoisting the above undefined is not the same as the not defined resulting from running:
console.log(foo); // → foo is not defined
A similar principle applies to functions. When functions are assigned to a variable (i.e. a function expression), the variable declaration is hoisted while the assignment remains in the same place. The following two code snippets are equivalent.
console.log(foo(2, 3)); // → foo is not a function
var foo = function(a, b) {
return a * b;
}
var foo;
console.log(foo(2, 3)); // → foo is not a function
foo = function(a, b) {
return a * b;
}
When declaring function statements, a different scenario occurs. Unlike function statements, function declarations are hoisted to the top of their scope. Consider the following code:
console.log(foo(2, 3)); // → 6
function foo(a, b) {
return a * b;
}
The above code is the same as the next code snippet due to hoisting:
function foo(a, b) {
return a * b;
}
console.log(foo(2, 3)); // → 6
Here are some examples of what is and what isn't hoisting:
// Valid code:
foo();
function foo() {}
// Invalid code:
bar(); // → TypeError: bar is not a function
var bar = function () {};
// Valid code:
foo();
function foo() {
bar();
}
function bar() {}
// Invalid code:
foo();
function foo() {
bar(); // → TypeError: bar is not a function
}
var bar = function () {};
// (E) valid:
function foo() {
bar();
}
var bar = function(){};
foo();
Limitations of Hoisting
Initializing a variable can not be Hoisted or In simple JavaScript Hoists declarations not initialization.
For example: The below scripts will give different outputs.
var x = 2;
var y = 4;
alert(x + y);
This will give you an output of 6. But this...
var x = 2;
alert(x + y);
var y = 4;
This will give you an output of NaN. Since we are initializing the value of y, the JavaScript Hoisting is not happening, so the y value will be undefined. The JavaScript will consider that y is not yet declared.
So the second example is same as of below.
var x = 2;
var y;
alert(x + y);
y = 4;
This will give you an output of NaN.
