JavaScript Hoisting

Kaushal Rao

September 11, 2023
3 min read
Hoisting js javascript JavaScript Hoisting

What is Hoisting In JS

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution.In effect, it puts variable, function and class declarations to the top of their scope (the global scope or a function) before execution.

In actuality, JavaScript does not move or add code to hoist declarations. These declarations are put into memory during the compile phase of the interpreter – making them available before the code is executed.

in this article, we’ll learn about hoisting and how it affects variables, functions and classes.

Variable Hoisting:

When you declare a variable using the var keyword, the declaration is “hoisted” to the top of its containing function or global scope. However, the initialization (assigning a value) remains in its original position.
This means that you can use a variable before it’s declared in your code, but it will have an initial value of undefined.

				
					console.log(x); // Outputs: undefined
var x = 5;

In this example, the variable x is hoisted to the top of its scope, so console.log (x) doesn’t throw an error. However, it prints undefined because the initialization (var x=5;) is not hoisted.

Function Hoisting

Function declarations are also hoisted to the top of their containing scope.
This means you can call a function before it’s defined in the code.

				
					sayHello(); // Outputs: "Hello, World!"

function sayHello() {
    console.log("Hello, World!");
}

In this example, the sayHello function is hoisted, so you can call it before its declaration in the code.

Variable Declarations vs. Assignments:

Only the declarations (using var, let, or const) are hoisted, not the assignments (initialization).
Variables declared with let and const are also hoisted but have a “temporal dead zone” where they can’t be accessed before declaration.

				
					console.log(y); // Throws a ReferenceError
let y = 10;

In this case, let variables are hoisted, but you can’t access them before their declaration.

Function Hoisting with Arrow Functions

ECMA2015 introduced a new way to create anonymous functions, arrow functions. These are defined by a pair of brackets containing 0 or more arguments, an arrow => and the function body in curly braces. With regard to hoisting, they operate as other function expresses. For example:

				
					arrow_func_express(); // TypeError: arrow_func_express is not a function

var arrow_func_express = () => {
    console.log('This the arrow function is not a function');
};

When using arrow functions, or any other function expression, we must always define the function before we use it in our code. This is the correct way to use a function expression:

				
					let arrow_func_express = () => {
    console.log('This function expression will work');
};

arrow_func_express(); // This function expression will work