In this article, we’ll break down what actually happens under the hood, why var, let, and const behave differently, and how the Temporal Dead Zone (TDZ) fits into the picture.

The Global Execution Context

When a JavaScript program starts, the engine creates a Global Execution Context (GEC).

The GEC is created in two phases:

1. Creation Phase

2. Execution Phase

Understanding hoisting starts with the creation phase.

What Happens in the Creation Phase?

During the creation phase, JavaScript does the following:

• Creates the window object (in browsers)

• Initializes the this keyword

  • In global scope, this === window

• Allocates memory for:

  • Variables

  • Functions

This memory allocation step is what we call hoisting.

Variable Hoisting

var Variables

• Memory is allocated during the creation phase

• Automatically initialized with undefined

• Can be accessed before declaration (value will be undefined)

console.log(a); // undefined
var a = 10;

This behavior is why var is considered unsafe in many scenarios.

let and const Variables

• Memory is allocated during the creation phase

• They are not initialized

• They remain in the Temporal Dead Zone (TDZ)

• Accessing them before declaration results in a ReferenceError

Important: let and const are hoisted, but they are not initialized.

Understanding the Temporal Dead Zone (TDZ)

The Temporal Dead Zone is one of the most confusing parts of JavaScript.

• TDZ is not a physical place

• It is a time period

• It exists from:

  • Scope creation

  • Until the variable declaration is executed

Once the declaration line runs, the TDZ ends.

{
    // === name variable's TDZ started here
    let name;
    // console.log(name); // RerenceError
    // some code
    // some code
    name = "tapaScript" // === name variable's TDZ ends here
    console.log(name);
    //
    //
}

For const, initialization must happen at the declaration line, otherwise JavaScript throws an error.

Function Hoisting

Function Declarations

• Entire function is stored in memory during the creation phase

• Can be called before the function declaration appears in code

greet(); // "Hello"

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

This is known as full hoisting.

Function Expressions

Function expressions behave like variables.

• Hoisting depends on how they are declared (var, let, const)

• They are not callable before initialization

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

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

Execution Phase

After the creation phase finishes:

• JavaScript enters the execution phase

• Code runs line by line

• Variable assignments happen here

• Function calls are executed here

So, What Is Hoisting Really?

❌ Hoisting is not JavaScript moving code to the top
✅ Hoisting is memory allocation before execution

• Variable hoisting → memory created for variables

• Function hoisting → memory created for functions

Nothing is physically moved in your source code.

"Why is ref.current null even though I just attached it to a DOM element?"

Let’s clear up the confusion by understanding how React updates the UI in two distinct phases:

1. Render

2. Commit

Imagine React is like a builder and a Planner who building a house (your UI). It does it in two steps:

1. Planning Phase (Render)

React (the architect) is planning:

• “Where should the doors go?”

• “Where should the windows be?”

But

• The house isn’t build yet.

• So if you try to “open a door” during this step, it won't work — it doesn’t exist yet!

This is like trying to access ref.current during rendering — it's either null or not correct yet.

2. Building Phase (Commit)

Now React (the builder) actually builds:

• Puts the doors, windows, roof, etc., in place.

• Once the house is done, you can now open the door!

his is like after the DOM is built — your ref.current now points to the real thing.

Let’s visualise this steps:

[Render Phase] (Planning)
------------------------------------------------
| React runs your components                  |
| No DOM yet (just planning)                  |
| ref.current = null or old value             |
------------------------------------------------

[Commit Phase] (Building)
------------------------------------------------
| React updates the DOM                       |
| - First, it clears old refs (null them out) |
| - Then, builds DOM elements                 |
| - Then, sets ref.current to new elements    |
------------------------------------------------

That’s all for today. Feel free to share your thoughts or questions if you found this article helpful.

JavaScript has emerged as the ultimate game-changer in the world of technology, revolutionizing how we interact with the web and shaping the digital landscape in unprecedented ways. Introduced in 1995, JavaScript began as a simple scripting language to add interactivity to web pages. Over the decades, it has evolved into a powerful and versatile programming language capable of powering everything from dynamic websites to complex applications. Its flexibility allows developers to create rich, responsive user interfaces, enhancing user experiences across all devices. Libraries and frameworks like React, Angular, and Vue.js have further propelled JavaScript into the forefront, enabling developers to build sophisticated front-end architectures with ease.