DEV Community: Faiz Mansuri

Debunking “Hoisting” – It’s Not Lifting, It’s Contextual Initialization

Faiz Mansuri — Fri, 11 Jul 2025 13:35:39 +0000

Ever logged console.log(myVar) only to see undefined… then tried the same with let and got a ReferenceError? You’re not alone. Let’s deep-dive into JavaScript’s Global Execution Context (GEC) and Function Execution Context (FEC) to demystify what’s really happening.

“Hoisting” isn’t a cosmic elevator pulling your variables up. It’s JavaScript establishing contexts before execution—and initializing some names differently.

Global Execution Context (GEC)

What it is: The environment created when your script first runs (e.g., window in browsers, global in Node.js).
Variable instantiation:
- var names get declared and initialized to undefined.
- let/const names are registered but not initialized—enter the Temporal Dead Zone (TDZ) until their definition line.

// In GEC:
console.log(myVar);   // → undefined  
console.log(myLet);   // → ReferenceError (TDZ)  
var   myVar = "A";    
let   myLet = "B";

Function Execution Context (FEC)

What it is: A fresh context created each time a function is called, with its own scope chain and this binding.
Hoisting behavior inside FEC:
- Function declarations are fully hoisted—you can call them before they appear.
- Inside that FEC, var again initializes to undefined; let/const stay in TDZ until their line.

// FEC for chase():
chase();  // Works, because function chase is hoisted

function chase() {
  console.log("In chase, myVar is:", myVar);        // undefined
  console.log("In chase, myLet is:", myLet);        // ReferenceError (TDZ)
  var   myVar = "inside chase";
  let   myLet = "also inside chase";
  caught();  // Also works—caught() is hoisted too
}

function caught() {
  console.log("Caught!");
}

Temporal Dead Zone (TDZ) Quick Demo

{
  console.log(blockVar);   // ReferenceError – still TDZ!
  let blockVar = "Hello, TDZ!";
}

⏳ Until the let line runs, blockVar exists but is inaccessible.

JavaScript: Execution Context & this Made Easy

Faiz Mansuri — Wed, 09 Jul 2025 22:04:00 +0000

JavaScript can feel like magic. But magic is just tricks you don’t see. Let’s pull back the curtain on two big ideas: Execution Context and this. By the end, you’ll see why they matter and why you should care.

What Is an Execution Context?

Think of every bit of code as a kitchen.

Global Kitchen is the main studio.
Function Kitchen is a new room a chef builds each time they cook.
Eval Kitchen is a secret room you rarely visit.

Each kitchen has its own tools (functions) and ingredients (variables). When you run code, JS picks a kitchen and works there.

The Three Steps

Creation
- JS sets all var to undefined.
- let/const are known but not ready.
Execution
- JS runs your lines one by one.
- Values fill the blanks.
Exit
- Kitchen closes.
- Its tools and ingredients go away.

I firmly believe that knowing these steps stops 80% of your bugs.

Understanding `this`

In JS, this is the chef’s badge it tells you who’s cooking right now.

Where you are	`this` is…
In the global scope	The global object
Inside a plain function	Depends on how it’s called
Inside an object’s method	That object
Inside an arrow function	Same `this` as outer scope

function show() {
  console.log(this); // window in browser
}

const user = {
  name: "mimi",
  greet() {
    console.log(this.name); // "mimi"
  }
};

show();
user.greet();

Lexical Environment: A Simple Tree

“Lexical” means “where it’s written.” Imagine your code as a tree:

Global
 └ main()
    └ outer()
       └ inner()

Each node holds its own vars and sees its parent’s vars, but not its child’s. That rule is non-negotiable.

let x = "earth";

function main() {
  let y = "home";
  function outer() {
    let z = "door";
    function inner() {
      let w = "mind";
      console.log(x, y, z, w); // earth home door mind
    }
    inner();
    console.log(w); // Error: w is not here
  }
  outer();
}

main();

Why This Matters

Fewer Surprises. You know where your vars live.
Clear Bugs. You see why you got undefined or the wrong this.
Better Code. You write functions that do just what you expect.

How Web Pages Load?

Faiz Mansuri — Fri, 27 Jun 2025 06:54:32 +0000

I’ve been revisiting some fundamentals around script loading and wanted to share a simple visual that clarifies how script placement and attributes impact page performance:

🟢 HTML Parsing
🔵 Script Download
🔴 Script Execution

─────────────────────────────────────────────────────────────

1️⃣ <script> in

HTML: 🟢🟢 🔴 🟢🟢🟢
Script: 🔵🔴
Parsing stops while the script downloads and runs.
This can delay rendering and hurt perceived performance.

─────────────────────────────────────────────────────────────

2️⃣ <script> at end of

HTML: 🟢🟢🟢🟢🟢🟢
Script: ------------🔵🔴
HTML finishes parsing before the script loads and executes.
A safer default for avoiding render-blocking.

─────────────────────────────────────────────────────────────

3️⃣ <script async>
HTML: 🟢🟢🟢🟢🟢🟢
Script: 🔵---🔴
Downloads in parallel and executes as soon as it’s ready.
Can interrupt parsing unpredictably.

─────────────────────────────────────────────────────────────

4️⃣ <script defer>
HTML: 🟢🟢🟢🟢🟢🟢
Script: 🔵---------------🔴
Downloads in parallel and executes after parsing is complete.
Predictable and non-blocking.

Even small adjustments here can improve metrics like First Contentful Paint and make your site feel faster.

DEV Community: Faiz Mansuri

Debunking “Hoisting” – It’s Not Lifting, It’s Contextual Initialization

“Hoisting” isn’t a cosmic elevator pulling your variables up. It’s JavaScript establishing contexts before execution—and initializing some names differently.

Global Execution Context (GEC)

Function Execution Context (FEC)

Temporal Dead Zone (TDZ) Quick Demo

JavaScript: Execution Context & this Made Easy

What Is an Execution Context?

The Three Steps

Understanding this

Lexical Environment: A Simple Tree

Why This Matters

How Web Pages Load?

Understanding `this`