❮ Previous Next ❯

JavaScript Working

  • This lesson explains the internal working mechanism of JavaScript.

  • Introduction

    To become strong in JavaScript, it is not enough to only write code.
    You must also understand how JavaScript works internally.

    This lesson explains:

    • How JavaScript code is executed

    • What is a JavaScript Engine

    • What is an Execution Context

    • How JavaScript runs code step by step

    Understanding this topic is very important for interviews and advanced concepts like:

    • Hoisting

    • Scope

    • Closures

    • Call Stack

    • Asynchronous JavaScript

    How JavaScript Works 

    JavaScript follows a specific execution process:

    1. JavaScript code is written by the developer

    2. JavaScript Engine reads the code

    3. Execution Context is created

    4. Code is executed line by line

    5. Output is produced

    JavaScript is:

    • Single-threaded

    • Synchronous (by default)

    • Interpreted (runs line by line)

    What is a JavaScript Engine ?

    A JavaScript Engine is a program that:

    • Reads JavaScript code

    • Converts it into machine-level instructions

    • Executes the code

    In simple words:
    The JavaScript engine is the brain that runs JavaScript code.

  • Popular JavaScript Engines

    Different browsers use different JavaScript engines:

    BrowserJavaScript Engine
    Google ChromeV8
    Mozilla FirefoxSpiderMonkey
    Microsoft EdgeV8
    SafariJavaScriptCore

    Why JavaScript Engine is Needed

    Computers do not understand JavaScript directly.
    They only understand machine code (0s and 1s).

    So the JavaScript engine:

    1. Reads JavaScript code

    2. Translates it

    3. Executes it

    Without a JavaScript engine, JavaScript cannot run.

    Internal Working of JavaScript Engine

    The JavaScript Engine works in two main phases:

    1. Memory Creation Phase

    2. Execution Phase

    These phases happen inside something called Execution Context.

  • What is an Execution Context ?

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

    It contains:

    • Variables

    • Functions

    • Scope information

    • Reference to this

    In simple words:
    Execution Context decides how and where the code will run.

    Types of Execution Context

    JavaScript has three types of execution contexts:

    1. Global Execution Context (GEC)

    2. Function Execution Context (FEC)

    3. Eval Execution Context (rarely used)

    Global Execution Context (GEC)

    This is the default execution context.

    • Created when the program starts

    • Only one global execution context exists

    • Code not inside any function runs here

    Example

    var a = 10;

    console.log(a);

    This code runs inside the Global Execution Context.

    What Happens in Global Execution Context ?

    The Global Execution Context has two phases:

    Phase 1: Memory Creation Phase

    • Variables are allocated memory

    • Functions are stored fully

    • Variables are initialized as undefined

    Phase 2: Execution Phases

    • Code is executed line by line

    • Values are assigned

    • Functions are called

  • Memory Creation Phase

    Example:

    var x = 5;

    var y = 10;

    During memory creation:

    • x → undefined

    • y → undefined

    No values are assigned yet.

    Execution Phase 

    During execution:

    • x = 5

    • y = 10

    Now variables hold actual values.

    Example: Complete Flow

    var a = 10;

    var b = 20;

    console.log(a + b);

    Step 1: Memory Creation

    • a → undefined

    • b → undefined

    Step 2: Execution

    • a = 10

    • b = 20

    • console.log(30)

      Function Execution Context (FEC)

      Whenever a function is called:

      • A new execution context is created

      • It has its own memory and execution phases

    Understanding Function Execution Context (FEC)

    Shows how a new execution context is created when a function is called. 

    function add(x, y) {
  var result = x + y;
  return result;
}
add(5, 10);

    • How This Code Executes

      1. Global Execution Context is created

      2. Function definition is stored in memory

      3. When add(5, 10) is called:

        • A new Function Execution Context is created

      4. Parameters and variables get memory

      5. Code inside function executes

      6. Result is returned

      7. Function execution context is destroyed

      Function Execution Context Phases

      Just like GEC, FEC also has:

      1. Memory Creation Phase

      2. Execution Phase

      Each function call gets its own separate execution context.

      Execution Context Stack (Call Stack)

      JavaScript manages execution contexts using a stack called the Call Stack.

      Rules:

      • Last In, First Out (LIFO)

      • The currently executing context stays on top

    Understanding Call Stack

    Demonstrates how JavaScript uses a stack to manage function execution order. 

    function first() {
  second();
}
function second() {
  console.log("Hello");
}
first();

    • Call Stack Flow

      1. Global Execution Context pushed

      2. first() pushed

      3. second() pushed

      4. console.log() executes

      5. second() popped

      6. first() popped

      7. Global context remains

      Why Execution Context is Important

      Understanding execution context helps to understand:

      • Hoisting

      • Scope chain

      • Closures

      • Call stack

      • Error handling

      Many JavaScript interview questions are based on this topic.

      Common Mistakes

      • Thinking JavaScript runs top to bottom only

      • Ignoring memory creation phase

      • Not understanding function execution

      • Confusing execution context with scope

    ❮ Previous Next ❯