<![CDATA[Deep Javascript Concepts]]>https://deep-javascript-concepts.hashnode.devRSS for NodeWed, 30 Sep 2026 13:33:04 GMT60<![CDATA[02 How JavaScript code is Executed & Call Stack]]>https://deep-javascript-concepts.hashnode.dev/02-how-javascript-code-is-executed-and-call-stackhttps://deep-javascript-concepts.hashnode.dev/02-how-javascript-code-is-executed-and-call-stackFri, 15 Aug 2025 10:12:35 GMT

πŸš€ JavaScript Code Execution Process

JavaScript is a single-threaded, synchronous, non-blocking language that uses an event-driven model with a call stack, heap, Web APIs, task queue, and event loop.

final_execution_context.jpg

πŸ” Step-by-Step: How JS Executes Code

  1. Parsing & Compilation Phase

    • Code is parsed by the JS engine (e.g., V8 in Chrome).

    • Function and variable declarations are hoisted.

    • Scope and memory are set up.

  2. Execution Phase

    • Code runs top to bottom, line by line.

    • Functions are pushed/popped from the call stack when invoked.

    • Variables are resolved using the scope chain.

πŸ“š Components of JavaScript Runtime

1. Call Stack

A LIFO (Last In, First Out) structure that tracks function calls.

function a() {
  b();
}

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

a();

πŸ” Call Stack Flow:

Global()
β†’ a()
   β†’ b()
      β†’ console.log()

Stack Push/Pop:

  • Global() β†’ pushed first

  • a() β†’ pushed

  • b() β†’ pushed

  • console.log() β†’ pushed β†’ popped

  • b() β†’ popped

  • a() β†’ popped

  • Global() β†’ popped

2. Memory Heap

  • Where all objects, arrays, and functions are stored.

  • Unstructured region for dynamic memory allocation.

3. Web APIs (Browser Environment)

JS has access to browser-provided APIs like:

  • setTimeout

  • DOM Events

  • Fetch/XHR

    These run outside the JS engine.

4. Callback / Task Queue

After a Web API (like setTimeout) finishes, it sends the callback to the task queue, waiting for the call stack to be empty.

5. Event Loop

  • Continuously checks if the call stack is empty.

  • If it is, it moves the first task from the queue to the stack.

⏱️ Example with setTimeout

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

Output:

1
3
2

πŸ”„ What Happens:

  1. console.log("1") β†’ Call Stack β†’ logs 1

  2. setTimeout β†’ Web API β†’ after 0ms β†’ pushes callback to queue

  3. console.log("3") β†’ Call Stack β†’ logs 3

  4. Call Stack is now empty β†’ Event Loop moves callback β†’ Call Stack β†’ logs 2

🧠 Key Concepts

ConceptDescription
Call StackTracks function calls
Memory HeapStores variables and objects
Web APIsBrowser features (timers, DOM, etc.)
Callback QueueStores async tasks waiting to run
Event LoopMoves tasks from queue to stack when ready

🎯 Visual Summary

  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”        β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
  β”‚ Call Stack  β”‚        β”‚ Task Queue β”‚
  β””β”€β”€β”€β”€β–²β”€β”€β”€β”¬β”€β”€β”€β”€β”˜        β””β”€β”€β”€β”€β”¬β”€β”€β”€β–²β”€β”€β”€β”€β”˜
       β”‚   β”‚                   β”‚   β”‚
       β”‚   └─ console.log()    β”‚   └─ (After async complete)
       β”‚                       β”‚
       β”‚   β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”     β”‚
       └──▢│ Web APIs     β”‚β”€β”€β”€β”€β”˜
           β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜

]]><![CDATA[01 How JavaScript Works & Execution Context]]>https://deep-javascript-concepts.hashnode.dev/01-how-javascript-works-and-execution-contexthttps://deep-javascript-concepts.hashnode.dev/01-how-javascript-works-and-execution-contextFri, 15 Aug 2025 09:54:42 GMTLet's dive into how JavaScript works, starting from the core engine mechanics to the Execution Context concept. This is Lesson 01: How JavaScript Works & Execution Context – a foundational topic for mastering JS internals.

πŸ”₯ 01. How JavaScript Works – Overview

JavaScript is:

  • Single-threaded β†’ one task at a time

  • Synchronous by default (but supports async with Web APIs)

  • Interpreted/Just-in-time compiled (V8 engine etc.)

JavaScript runs inside the JavaScript Engine (e.g., V8 in Chrome, SpiderMonkey in Firefox). It consists of:

  • Call Stack

  • Memory Heap

  • Execution Context

  • Event Loop

βš™οΈ JavaScript Engine Workflow

  1. Parsing Phase (Compile Time)

    • Code is parsed into tokens

    • Converted into Abstract Syntax Tree (AST)

    • Variables and function declarations are hoisted

  2. Execution Phase

    • JS runs top-to-bottom

    • Creates Execution Contexts for each scope

    • Handles function calls using the Call Stack

🧠 Execution Context (EC) – Core Concept

An Execution Context is an environment where JavaScript code is evaluated and executed.

There are 3 main types:

  1. Global Execution Context (GEC)

  2. Function Execution Context (FEC)

  3. Eval Execution Context (rarely used)❌

πŸ”Ή Global Execution Context

Created when the JS file is loaded:

  • Creates a global object (window in browsers, global in Node.js)

  • Binds this to global object

  • Hoists global variables and functions

Example:

var a = 10;

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

β†’ GEC is created, where:

  • a is added to memory

  • greet function is hoisted

πŸ”Ή Function Execution Context

Created every time a function is invoked:

  • Has its own Variable Environment (VE)

  • Arguments, local variables, inner functions live here

  • Forms part of the Call Stack

Example:

function add(x, y) {
  var total = x + y;
  return total;
}

add(3, 4);

When add(3, 4) is called:

  1. New FEC is created

  2. Parameters x=3, y=4, local total=7

  3. FEC is popped off after return

πŸ“¦ What’s Inside an Execution Context?

Every EC contains:

  1. Variable Environment (VE)

    • var, function declarations

    • arguments object

  2. Lexical Environment

    • Tracks where variables/functions were defined

    • Helps with scope chain

  3. this Binding

    • Depends on how a function is called

πŸ” Execution Stack (Call Stack)

The Call Stack manages Execution Contexts in a LIFO manner:

function one() {
  two();
}
function two() {
  console.log("2");
}
one();

Call Stack Flow:

Global EC
β†’ one() EC
  β†’ two() EC
    β†’ console.log() EC

Each function creates a new EC which is pushed onto the stack, then popped off when done.

🧠 Summary

TermMeaning
Execution ContextThe environment where code is run
Global ECCreated once when script loads
Function ECCreated every time a function runs
Call StackTracks active function calls
Variable EnvironmentStores function variables & arguments

πŸ” Visual Mind Map

JavaScript Engine
β”œβ”€ Memory Heap
β”œβ”€ Call Stack
β”‚  β”œβ”€ GEC
β”‚  β”œβ”€ FEC
β”‚  └─ Eval EC (rare)
└─ Event Loop (later topic)

  • The article explores JavaScript's core mechanics, focusing on the JavaScript Engine and Execution Contexts.

  • It explains how JavaScript is single-threaded and synchronous, detailing the Parsing and Execution phases.

  • Key components such as the Global Execution Context, Function Execution Context, and Call Stack are explained.

  • It highlights how these components manage code execution and variable storage.

  • The structure of Execution Contexts is discussed, including the Variable Environment, Lexical Environment, and this binding.

  • Provides a foundational understanding of JavaScript's internal workings.

]]>