Hoisting in JavaScript Explained with Examples

If you're preparing for frontend interviews, understanding Hoisting in JavaScript is a must. It's one of those concepts that seems simple at first glance but can trip you up during coding rounds or real-world debugging. In this blog, we’ll break down hoisting in JavaScript in an easy-to-understand way, with examples and explanations that make sense even if you're just getting started.

Let's deep dive into what it is, how it works internally, and how different types of variables and functions behave because of hoisting.

What is Hoisting in JavaScript & Examples

In simple terms, hoisting in JS is a behavior where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed.

This means that you can use a variable or call a function before you’ve actually declared it in the code!

For example:

console.log(myVar); // undefined
var myVar = 5;

Here, myVar is declared after it’s used, but because of variable hoisting in JavaScript, the declaration is moved to the top and only the assignment happens in place.

Another example with functions:

greet();

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

This works perfectly because of function hoisting in JavaScript. The entire function definition is hoisted to the top of the scope.

How Hoisting in JavaScript Works Internally – Understand Scope

To understand hoisting in JavaScript, you need to understand that JavaScript has two phases when executing code:

1. Creation phase – where the memory space is allocated for variables and functions, and they are initialized (either to undefined or fully loaded depending on their type).

2. Execution phase – where the code runs line by line and the assignments or function calls are processed.

During the creation phase, the JavaScript engine scans the code and moves declarations (but not initializations) to the top. This is why scope plays a huge role in how hoisting behaves.

For example, in the global context, all var declarations are hoisted and initialized with undefined. At the same time, let and const are hoisted but not initialized, they are in a temporal dead zone until the code reaches their definition.

Inside a function, the same process happens, but in the local function scope.

Variable Hoisting in JavaScript

var, let and const – What’s the difference?

• var is hoisted and initialized with undefined.

• let and const are hoisted but not initialized. Trying to access them before their declaration throws a ReferenceError because they are in the Temporal Dead Zone (TDZ).

Temporal Dead Zone (TDZ)

The TDZ is the time between the entering of the scope and the actual variable declaration where the variable cannot be accessed. This helps prevent bugs and makes code more predictable.

Variable Hoisting in Global Context

Example - var

console.log(globalVar); // undefined
var globalVar = "I'm global";
console.log(globalVar); // I'm global

Example - let and const

console.log(globalLet); // ReferenceError
let globalLet = "I'm global";

console.log(globalConst); // ReferenceError
const globalConst = "I'm global";

Variable Hoisting in Function Context

Example - var

function testVar() {
  console.log(innerVar); // undefined
  var innerVar = "Inside function";
  console.log(innerVar); // Inside function
}
testVar();

Example - let and const

function testLetConst() {
  console.log(innerLet); // ReferenceError
  let innerLet = "Inside function";

  console.log(innerConst); // ReferenceError
  const innerConst = "Inside function";
}
testLetConst();

Function Hoisting in JavaScript

Unlike variables, function declarations are hoisted with their entire body.

Normal Function Hoisting

sayHello();

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

The function can be called before it is declared because it’s fully hoisted.

Arrow Function Hoisting in JavaScript

Arrow functions, however, behave differently because they are treated as variable assignments, not function declarations.

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

const sayHi = () => {
  console.log("Hello from an arrow function!");
};

Here, sayHi is hoisted but remains uninitialized until the assignment happens, leading to a runtime error if accessed before its definition.

Example – Function Hoisting

// Function Declaration
greetUser(); // Works!

function greetUser() {
  console.log("Welcome, user!");
}

// Arrow Function
greetAdmin(); // TypeError

const greetAdmin = () => {
  console.log("Welcome, admin!");
};

Function Variable Hoisting in JavaScript

When you assign a function to a variable, it's treated like variable hoisting only, and all the rules applied to the var, let and const are similarly applied to the Function Variables. Checkout the example below to understand function variable hoisting in javascript.

Example – Function Variable Hoisting

// Using var
console.log(varFunc()); // undefined

var varFunc = function() {
  return "I'm a function expression!";
};

// Using let
console.log(letFunc()); // ReferenceError

let letFunc = function() {
  return "I'm a function expression!";
};

// Using const
console.log(constFunc()); // ReferenceError

const constFunc = function() {
  return "I'm a function expression!";
};

In this example, only varFunc is hoisted (with undefined), but letFunc and constFunc are hoisted but uninitialized, leading to a runtime error if accessed too early.

By mastering hoisting in JavaScript, you'll easily handle tricky interview questions and write cleaner, more predictable code in your day-to-day work as a frontend developer. Keep experimenting with examples, and you'll soon feel comfortable explaining these concepts to anyone.