JavaScript Hoisting

By | August 27, 2022

Hoisting is JavaScript’s default behavior of moving declarations to the top.

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.

Example 1 gives the same result as Example 2:

Example 1:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
var x; // Declare x
</script>
</body>
</html> 

Result:

5

Example 2

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x; // Declare x
x = 5; // Assign 5 to x
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x;           // Display x in the element
</script>
</body>
</html> 

Result:

5

To understand this, you have to understand the term “hoisting”.

Hoisting is JavaScript’s default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).

The let and const Keywords

Variables defined with let and const are hoisted to the top of the block, but not initialized.

Meaning: The block of code is aware of the variable, but it cannot be used until it has been declared.

Using a let variable before it is declared will result in a ReferenceError.

The variable is in a “temporal dead zone” from the start of the block until it is declared:

Example

This will result in a ReferenceError:

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>
<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>

Result:

JavaScript Hoisting

With let, you cannot use a variable before it is declared.

ReferenceError: Cannot access ‘carName’ before initialization

Using a const variable before it is declared, is a syntax errror, so the code will simply not run.

Example

This code will not run.

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>const</b>, you cannot use a variable before it is declared.</p>
<p>Try to remove the //.</p>
<p id="demo"></p>
<script>
carName = "Volvo";
//const carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>

Result:

JavaScript Hoisting

With const, you cannot use a variable before it is declared.

Try to remove the //.

Volvo

JavaScript Initializations are Not Hoisted

JavaScript only hoists declarations, not initializations.

Example 1 does not give the same result as Example 2:

Example 1

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // Initialize x
var y = 7; // Initialize y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y
</script>
</body>
</html> 

Result:

5 7

Example 2

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5;  // Initialize x
elem = document.getElementById("demo");      // Find an element 
elem.innerHTML = "x is " + x + " and y is " + y;  // Display x and y
var y = 7;  // Initialize y
</script>
</body>
</html> 

Result:

x is 5 and y is undefined

Does it make sense that y is undefined in the last example?

This is because only the declaration (var y), not the initialization (=7) is hoisted to the top.

Because of hoisting, y has been declared before it is used, but because initializations are not hoisted, the value of y is undefined.

Example 2 is the same as writing:

Example

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = 5; // Initialize x
var y;   // Declare y
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = x + " " + y;       // Display x and y
y = 7;   // Assign 7 to y
</script>
</body>
</html> 

Result:

5 undefined

Declare Your Variables At the Top !

Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript.

If a developer doesn’t understand hoisting, programs may contain bugs (errors).

To avoid bugs, always declare all variables at the beginning of every scope.

Since this is how JavaScript interprets the code, it is always a good rule.

Leave a Reply

Your email address will not be published. Required fields are marked *