7.10 JS Hoisting

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: JS Hoisted Declarations part 1

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

Example 2: JS Hoisted Declarations part 2

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

• 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 3: JS Hoisting part 1

This will result in a ReferenceError:

carName = "Volvo";
let carName;

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

Example 4: JS Hoisting part 2

This code will not run.

carName = "Volvo";
const carName;

Read more about let and const in JS Let / Const.

JavaScript Initializations are Not Hoisted

• JavaScript only hoists declarations, not initializations.
• Example 5: does not give the same result as Example 6:

Example 5: JS Initializations are Not Hoisted

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

Example 6: JS Initializations are Not Hoisted part 2

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // Display x and y

var y = 7; // Initialize y

• Does it make sense that y is undefined in the above 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 6 is the same as writing:

Example 7: JS Initializations are Not Hoisted part 3

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