Hoisting in JavaScript Explained | JavaScript Interview Questions
JavaScript is one of the most popular languages. There are a lot of resources on the web teaching JavaScript and its concepts. Our aim with this series is to share a concise, useful, and quality list of questions with their answers. We don't want to add to the noise but rather be the source of clarity.
Explain Hoisting in javascript
The most common explanation of Hoisting on the web would be
Hoisting is the default behaviour of JavaScript where all the variables and functions declarations are moved to the top.
It is correct but there is more to it than what meets the eye.
Variable Declarations
In JavaScript, we can define variables using different keywords that have subtle differences among them https://www.ecma-international.org/ecma-262/6.0/#sec-let-and-const-declarations.
We can declare variables in three ways --
var name = "Yomesh";
let surname = "Gupta";
const profession = "Senior Frontend Engineer";
JavaScript engine runs through our code in two phases — the Creation Phase
and the Execution Phase
. In the first (Creation) phase, the engine goes through the code and allocates memory for the variables.
In the same phase, the variables declared via var
are assigned the value undefined
and that is why in the below code snippet you will get the value of the variable firstname
as undefined
.
console.log(firstname); // undefined
var firstname = "Yomesh";
This is what we know as Hoisting
.
In the case of the variables declared via let
and const
, they are also allocated memory but they are not assigned the value undefined
initially i.e. variable declarations do hoist but they throw an error till initialized. Let us consider an example.
/*
Since variables are hoisted
it would be equivalent to
let firstname;
*/
// ReferenceError as memory is allocated but undefined is not assigned initially
console.log(firstname);
function init() {
...
}
function processing() {
...
}
let firstname = "Yomesh"; // initialization
console.log(firstname); // Yomesh
In the Execution phase, variables are assigned their actual values and it is perfectly fine to use them afterwards.
const name = "Yomesh";
console.log(name); // Yomesh | Perfectly fine to use here
Temporal Dead Zone
Let us re-consider one of the previously discussed examples again.
// Beginning of the temporal dead zone
console.log(firstname); // ReferenceError
function init() {
...
}
function processing() {
...
}
let firstname = "Yomesh"; // Ending of the temporal dead zone
console.log(firstname); // Yomesh
As we have seen earlier, any variable declared via let
or const
cannot be accessed before their initialization
. The region for the variable firstname
which begins from the place where the variable is hoisted as in its scope is created till the place where the variable is initialized is known as Temporal Dead Zone
. Temporal Dead Zone is a good way to indicate bugs in the code. Accessing variables before the declaration is often a root cause of many errors.
Hoisting in Functions
Hoisting in functions works the same way with the only notable exception that function declarations are hoisted but not function expressions. For example --
sayHello(); // logs Hello
// Function declaration
function sayHello() {
console.log("Hello");
}
Function declarations are hoisted to the top of the enclosing function or global scope. We can use the function before we declared it.
sayHello(); // Uncaught TypeError: sayHello is not a function
// Function expression
var sayHello = function () {
console.log("Hello");
};
Function expressions are not hoisted, unlike function declarations. We can't use function expressions before we create them.
I hope this was helpful to you in some way. Please do share with others so that they can learn too! :D