Hoisting : Functions vs Function Expressions

Hoisting

Hoisting is a concept where variable and function declarations are moved to the top of the current scope during the compilation phase.

Function Hoisting in JavaScript

In JavaScript, function declarations are hoisted, meaning you can call the function before it is defined in the code.

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

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

🔹 Why does this work?

• Function declarations are hoisted with their full definition to the top of their scope.

• So, even if the function is written later in the code, JavaScript already knows about it.

Function Expressions Are NOT Hoisted

However, if you assign a function to a variable (var, let, const), only the variable is hoisted, not the function itself.

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

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

With let or const:

sayBye(); // ❌ ReferenceError: Cannot access 'sayBye' before initialization

let sayBye = function() {
    console.log("Goodbye!");
};

• let and const do not initialize their variables at the time of hoisting.

• The function remains in the temporal dead zone (TDZ) until the declaration is encountered.