DEV Community

Shubha Khadgi
Shubha Khadgi

Posted on

What Is Hoisting in JavaScript?

#webdev #javascript #programming #beginners

I used to hear people say, “JavaScript hoists variables and functions,” and honestly... it just made things more confusing.

But once I saw it in action, it finally clicked.

In this blog, I’ll explain what hoisting really means, how it works under the hood, and how it might trip you up during interviews.

Table of Contents

What is Hoisting?

Hoisting is JavaScript’s way of reading your code before it actually runs it.

At the start of your program, JavaScript does a quick scan and sets aside space in memory for all the variables and functions you’ve declared.

  • For variables declared with var, it assigns them undefined.
  • For function declarations (function keyword), it stores the entire function, so it can be called before it's written in the code.

This behind-the-scenes setup is called hoisting.

Examples

Example 1: Hoisting with var 

console.log(name); 
var name = "John";
Enter fullscreen mode Exit fullscreen mode

Output:

undefined
Enter fullscreen mode Exit fullscreen mode

JavaScript sees this code like:

var name;
console.log(name); // undefined
name = "John";
Enter fullscreen mode Exit fullscreen mode

Example 2: Using an Undeclared Variable 

console.log(age); 
var name = "John";
Enter fullscreen mode Exit fullscreen mode

Output:

ReferenceError: age is not defined
Enter fullscreen mode Exit fullscreen mode

Why? Because age was never declared, so no memory was allocated for it during the initial scan.

Example 3: Function Declarations Are Fully Hoisted 

sayHello();

function sayHello() {
  console.log("Hello!");
}
Enter fullscreen mode Exit fullscreen mode

Output:

Hello!
Enter fullscreen mode Exit fullscreen mode

The whole function is hoisted to the top.

Example 4: Arrow Functions Are NOT Hoisted 

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

var greet = () => {
  console.log("Hi there!");
};
Enter fullscreen mode Exit fullscreen mode

Even though greet is declared with var, arrow functions behave like variables—not like hoisted function declarations.

Note: let and const Are NOT Like var 

console.log(age); // ❌ ReferenceError

let age = 25;
Enter fullscreen mode Exit fullscreen mode

Why does this throw an error even though age is declared?

Because of something called the Temporal Dead Zone (TDZ).

“Yeah, I know age exists, but you can’t touch it until I actually reach the line where it’s defined.”

So unlike var, JavaScript doesn’t give let and const a placeholder value like undefined. You’ll get a ReferenceError if you try to use them too early.

Practice Question: What’s the Output? 

var x = 10;
function test() {
  console.log(x);
  var x = 20;
}
test();
Enter fullscreen mode Exit fullscreen mode

Answer:

undefined
Enter fullscreen mode Exit fullscreen mode

Even though x = 10 exists globally, inside the test function, there's a new local var x. It’s hoisted to the top with a value of undefined—until it's later assigned 20.

Wanna Connect?

You can find me at:

Top comments (0)