JavaScript Scope & Hoisting
JavaScript Hoisting
JavaScript hoisting moves declarations to the top of their scope before the code runs.
Only the declaration moves. The value stays exactly where you wrote it.
This is why a var can be used before its line without an error, but is undefined.
Example
Example
javascript
console.log(count);
var count = 5;
console.log(count);The first line prints undefined rather than causing an error.
The second prints 5.
What is Hoisting?
Before running your code, JavaScript scans each scope and registers every declaration it finds.
It is as if the declarations were lifted to the top, which is where the name comes from.
The assignment is not lifted, so the variable has no value until its original line runs.
Syntax
Syntax
javascript
console.log(value);
var value = 10;JavaScript treats this as if var value; appeared at the top.
Function Declarations are Fully Hoisted
A function declaration is hoisted along with its body.
That is why you can call it before it appears in the file.
Example
Example
javascript
console.log(greet());
function greet() {
return "Hello";
}This works, because the whole function was registered before the code ran.
Function Expressions are Not
A function stored in a variable follows the variable's rules, not the function's.
The variable is hoisted, but it holds nothing until the assignment runs.
Example
Example
javascript
const greet = function () {
return "Hello";
};
console.log(greet());Calling greet() above this line would fail.
let and const Behave Differently
let and const are hoisted too, but you cannot use them before their line.
Trying to do so throws a ReferenceError instead of giving undefined.
Example
Example
javascript
let ready = true;
console.log(ready);Reading ready above the declaration would be an error.
That gap is called the temporal dead zone, covered in the next lesson.
Hoisting is Per Scope
Each function has its own hoisting, separate from the code around it.
Example
Example
javascript
var name = "global";
function show() {
console.log(name);
var name = "local";
}
show();The output is undefined, not "global".
The local var name was hoisted to the top of the function and hid the global one.
How to Avoid Hoisting Confusion
Declare variables at the top of the scope where you use them.
Prefer let and const, which fail loudly instead of quietly giving undefined.
Example
Example
javascript
function total(items) {
let sum = 0;
for (const item of items) {
sum += item;
}
return sum;
}
console.log(total([1, 2, 3]));Everything is declared before it is used, so hoisting never comes into play.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Hoisting</title>
</head>
<body>
<h1>JavaScript Hoisting</h1>
<p id="result"></p>
<script>
let output = "";
output += "Before: " + typeof count + "<br>";
var count = 5;
output += "After: " + count;
document.getElementById("result").innerHTML = output;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try swapping var for let:
Change var count to let count and see the error in the console.
Important Points
- Hoisting registers declarations before the code runs.
- Only the declaration is hoisted, never the assigned value.
- A
varread before its line isundefined. - Function declarations are hoisted with their body and can be called early.
letandconstthrow an error if used before their line.
Conclusion
JavaScript hoisting explains why some variables are undefined instead of causing an error.
Declaring everything before you use it makes hoisting irrelevant.
Understanding hoisting removes one of the most common sources of confusion in JavaScript.