Ankaj Gupta
February 13, 2019

Javascript Hoisting

What is Hoisting in JavaScript?

Hoisting is a mechanism in JavaScript where the JavaScript interpreter moves all variable and function declarations to the top of the current scope.

It's important to keep in mind that hoisting is applicable only for declarations, not initializations. It is required to initialize the variables and functions before using their values.

Types of Hoisting: There are 2 kinds of hoisting declaration in JavaScript:

  1. Variable hoisting
  2. Function hoisting

Note: Hoisting is done during the interpreter's first run through the code.

1. Variable Hoisting

Variable hoisting is a default behavior in JavaScript where all variable declarations are moved to the top of the current scope (function scope or global scope) that the variable is defined within.

Example 1: Variable Declaration Before Hoisting

In this example, we use x before declaration. It will give 10 as expected output:

<script>
    x = 10;           //Assign 10 to x
    document.write(x);
    var x;            //Declare x
</script>

Example 2: After Hoisting (How JavaScript Interprets It)

JavaScript compiler internally changes Example 1 to Example 2. Here's how it looks after the hoisting process:

<script>
    var x;            //Declare x, (Hoisted)
    x = 10;           //Assign 10 to x
    document.write(x);
</script>

Explanation: JavaScript hoisting behavior moves var x; declaration before the initialization (x = 10;). Variable declarations are moved to the top.

2. Function Hoisting

Hoisting only applies to function declarations (not function expressions). This means you can call a function before it's declared in your code.

Example: Calling Function Before Declaration

<script>
    //Calling function before declaration
    sayHello();
    
    function sayHello() {
        document.write("Hello, I am hoisted!");
    }
</script>

Output:

Hello, I am hoisted!

Function Declaration vs Function Expression

✅ Function Declaration (Hoisted)

// Works - hoisted
sayHello();

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

Can be called before declaration

❌ Function Expression (Not Hoisted)

// Error - not hoisted
sayHello(); 

var sayHello = function() {
    console.log("Hello!");
}

Cannot be called before declaration

Hoisting with let, const, and var

Different variable declaration keywords behave differently with hoisting:

Keyword Hoisting Initial Value Temporal Dead Zone
var ✅ Yes undefined ❌ No
let ✅ Yes uninitialized ✅ Yes
const ✅ Yes uninitialized ✅ Yes

Example: let and const Hoisting Behavior

// ReferenceError: Cannot access 'x' before initialization
console.log(x);
let x = 10;

// ReferenceError: Cannot access 'y' before initialization
console.log(y);
const y = 20;

Temporal Dead Zone (TDZ): let and const are hoisted but remain uninitialized until their declaration line, causing a ReferenceError if accessed.

Complete Example: Variable and Function Hoisting

<script>
    // Calling function before declaration (works!)
    greet();
    console.log(myVar);  // undefined
    console.log(myLet);  // ReferenceError
    
    function greet() {
        console.log("Hello!");
    }
    
    var myVar = "I'm hoisted";
    let myLet = "I'm in TDZ";
</script>

How JavaScript sees it:

function greet() {  // Function hoisted
    console.log("Hello!");
}

var myVar;           // Variable hoisted, undefined
let myLet;           // Variable hoisted, TDZ

greet();
console.log(myVar);  // undefined
console.log(myLet);  // ReferenceError

myVar = "I'm hoisted";
myLet = "I'm in TDZ";

Best Practices

✅ Do's

  • • Always declare variables at the top of their scope
  • • Initialize variables when you declare them
  • • Use let and const instead of var
  • • Understand TDZ for let and const

❌ Don'ts

  • • Don't rely on hoisting behavior
  • • Don't use var in new code
  • • Don't access let/const before declaration
  • • Don't use function expressions before declaration

Summary

Hoisting is JavaScript's behavior of moving declarations to the top of their scope. Understanding this mechanism is crucial for writing predictable code:

  • Variable Hoisting: var variables are hoisted and initialized to undefined
  • Function Hoisting: Function declarations are fully hoisted and can be called before declaration
  • let and const: Hoisted but remain in Temporal Dead Zone until initialization
  • Function Expressions: Not hoisted like function declarations

For better code quality, always declare and initialize variables at the top of their scope and use let or const instead of var.

JavaScript

Related Posts