4 Habits to Avoid Bugs related to Hoisting in your JavaScript Code

1. Declaring variables at the beginning of the scope

By declaring variables at the beginning of the scope you ensure that these variables are accessible throughout that scope, avoiding any confusion caused by hoisting.

const data = 12;
const variable = "some data";

// other code

2. var ❌ let and const ✅

Use let and const instead of var to declare or initialize variables.

Variables declared with var are hoisted to the top of their scope and initialized with undefined. That's why accessing them before the declaration line will result in undefined.

On the other hand, variables created with let and const are also hoisted to their scope, but not initialized. That's why accessing them before the declaration line results in a ReferenceError.

This behavior is called the "Temporal Dead Zone" (TDZ).

Also let and const are only accessible within the block they are declared in. This eliminates the possibility of issues of hoisting by variables declared with var.

Example:

console.log(x); // undefined (hoisted, initialized with undefined)
var x = 10; 

console.log(y); // ReferenceError: Cannot access 'y' before initialization (not initialized)
let y = 5;

console.log(z); // ReferenceError: Cannot access 'z' before initialization (not initialized)
const z = 7;

3. "use strict" mode

Enabling strict mode directive at the beginning of your code can prevent some hoisting-related problems.

"use strict";

In strict mode, using an undeclared variable throws an error.

4. Use arrow functions and expressions inside a block scope

Using arrow functions and expressions in block scope instead of normal functions.

Function declarations are hoisted along with their entire definition meaning you can call a function before its declaration in the code.

Arrow functions and expressions are defined at the point of use, eliminating confusion. Since they are not hoisted they don't create any errors.

Example:

function setData() {
    // Calling the function before declaration throws error
    // Error: Cannot access 'myFunc' before initialization
    myFunc();

    // Using arrow function
    const myFunc = () => {
      console.log("This is a function expression!");
    }
}

setData();

Conclusion

If you found this blog post helpful, please consider sharing it with others who might benefit. You can also follow me for more upcoming content on JavaScript, React, and other Web Development topics.

For paid collaboration, you can mail me at: gmail

Connect with me on Twitter, LinkedIn and GitHub

Thank you for Reading :)

Comments

[Tamimul Islam]

I think this line needs to be modified a little -
> Unlike var, variables created with let and const are not hoisted.

All variables declared with var, let, and const in JavaScript are hoisted.
The difference is:

1. Variables created with var are hoisted to the top of their function scope (or global scope if outside a function) and initialized with undefined. That's why accessing them before the declaration line will result in undefined.

2. On the other hand, variables created with let and const are also hoisted to block scope, but not initialized. That's why accessing them before the declaration line results in a ReferenceError. This behavior is called the "Temporal Dead Zone" (TDZ).

Example:

console.log(x); // undefined (hoisted, initialized with undefined)
var x = 10; 

console.log(y); // ReferenceError: Cannot access 'y' before initialization (not initialized)
let y = 5;

console.log(z); // ReferenceError: Cannot access 'z' before initialization (not initialized)
const z = 7;

[Shubh Sharma]

Thanks for the addition!

[Sridhar]

I have a doubt, what if the function expression is defined as function declaration, is it possible to access the function outside the function it is declared in?