What Is Hoisting In JavaScript And How It Works

JavaScript, as a dynamically-typed language, exhibits certain behaviors that might seem counterintuitive to developers. One such behavior is hoisting. In this tutorial you will learn about hoisting in JavaScript, how it works, and its implications for developers.

What Is Hoisting in JavaScript?

Hoisting is a JavaScript behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase.

Working of Hoisting

Here’s how hoisting works for variables and function declarations:

1. In JavaScript, during the compilation phase, the JavaScript engine scans through the code to find all variable and function declarations.
2. Then it allocates memory for these declarations and moves them to the top of their containing scope.
3. While the declaration is hoisted, the assignment or initialization is left in its original position in the code.

Variable Hoisting in JavaScript:

In JavaScript, variables declared with var are hoisted to the top of their scope. However, it’s crucial to understand that only the declarations are hoisted, not the initializations.

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

In this example, the declaration var x; is hoisted to the top of the scope, but the assignment x = 5; remains in place. As a result, the first console.log(x); outputs undefined because x has been declared but not yet assigned a value.

Function Hoisting:

Function declarations are also hoisted in JavaScript. This means you can call a function before its actual position in the code. Here’s an example:

foo(); // Output: "Hello, I am a function"

function foo() {
    console.log('Hello, I am a function');
}

In this case, the entire function declaration is hoisted to the top of the scope, allowing the function to be called before its appearance in the code.

Variable Hoisting vs Let & Const in JavaScript:

Variables declared with var are hoisted and initialized with undefined. But the variables declared with let or const are also hoisted, but they are not initialized. Therefore when you try to access a let or const variable before its declaration, you get a ReferenceError.

console.log(y); // Output: ReferenceError: y is not defined
let y = 10;
console.log(y); // 10

Function Declarations vs Function Expressions:

Function declarations are completely hoisted, including their implementation. You can use a function declared with function before its actual declaration in the code:

sayHello(); // Output: "Hello, world!"

function sayHello() {
    console.log('Hello, world!');
}

Function expressions, on the other hand, are only partially hoisted. The variable that holds the function expression is hoisted, but the function implementation is not:

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

var sayHi = function () {
    console.log('Hi, there!');
};

JavaScript Temporal Dead Zone (TDZ)

The Temporal Dead Zone (TDZ) in JavaScript is a period in which variables declared with let and const exist but cannot be accessed. During this time, referencing these variables will result in a ReferenceError.

console.log(z); // Output: ReferenceError: Cannot access 'z' before initialization
let z = 20;

This behavior is due to hoisting. The variable z is hoisted, but you can’t access it until it’s initialized.

Best Practices for Avoiding Hoisting Issues

To avoid hoisting-related problems and write more maintainable and predictable code, consider these best practices:

• Declare your variables and functions at the top of their containing scope to make hoisting behavior more explicit.
• Use let and const instead of var to avoid hoisting-related issues, and because they have block-level scope.
• Avoid using a variable or function before its declaration, even though it’s allowed. This improves code readability and prevents unexpected behaviors.
• Be aware of the differences between function declarations and function expressions, and use them appropriately.