❮ Previous

Advanced Concepts

  • This lesson dives into deeper advanced JavaScript topics.

  • Introduction to Advanced JavaScript Concepts

    As JavaScript applications grow larger, understanding how JavaScript works internally becomes critical for:

    • Writing efficient code

    • Avoiding bugs and crashes

    • Improving performance

    • Handling memory properly

    • Clearing interviews confidently

    In this lesson, we will deeply understand:

    1. Execution Context

    2. Memory Heap and Call Stack

    3. Common JavaScript Pitfalls

    4. Writing Optimized JavaScript Code

    Execution Context 

    What Is an Execution Context ?

    An Execution Context is the environment in which JavaScript code is created, evaluated, and executed.

    Whenever JavaScript runs code, it does so inside an execution context.

    Simple Definition

    Execution Context is a container that holds information about:

    • Variables

    • Functions

    • Scope

    • The value of this

    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)

    • Created when JavaScript file starts executing

    • Created only once

    • Stored in the Call Stack first

    Contains:

    • Global variables

    • Global functions

    • this keyword (points to window in browsers)

Introduction to Execution Context

Understand how JavaScript runs code using execution context and manages variables and functions internally. 

// Global Execution Context 

var a = 10;

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

  • Function Execution Context (FEC)

    • Created every time a function is called

    • Each function call creates a new context

    • Destroyed after function execution

Function Execution Context (FEC)

Learn how JavaScript creates a new execution environment every time a function is called. 

// Function Execution Context 

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

add(2, 3);

  • Calling add() creates a new execution context.

    Phases of Execution Context

    Each execution context has two phases:

    Memory Creation Phase

    • Variables are allocated memory

    • Functions are stored entirely

    • Variables initialized with undefined

    Execution Phase

    • Code is executed line by line

    • Values are assigned

    • Functions are invoked

Phases of Execution Context

Understand how JavaScript first stores variables/functions in memory and then executes code step by step. 

// Execution Context Phases 

var x = 10;

function test() {
  var y = 20;
  console.log(x + y);
}

test();

  • Memory Phase

    • x → undefined

    • test → function

    Execution Phase

    • x = 10

    • test() called

    • y = 20

    • Output: 30

    Memory Heap & Call Stack

    What is Memory Heap ?

    The Memory Heap is a large memory area where:

    • Objects

    • Arrays

    • Functions
       are stored dynamically.

    It is unstructured memory.

Memory Heap

Learn how JavaScript stores objects, arrays, and functions dynamically inside the memory heap. 

// Memory Heap Example

let user = { name: "Rahul", age: 25 };

  • The object is stored in the heap.

    What is Call Stack ?

    The Call Stack is a data structure that:

    • Tracks function calls

    • Executes code in order

    • Uses LIFO (Last In, First Out)

Call Stack

Understand how JavaScript uses a stack to manage function calls and execution order. 

// Call Stack 

function first() {
  second();
}

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

first();

  • Call Stack Order

    1. Global Execution Context

    2. first()

    3. second()

    4. second() finishes

    5. first() finishes

    Stack Overflow Error

    Occurs when:

    • Too many function calls

    • Infinite recursion

Call Stack Order & Stack Overflow

Learn how function calls are stacked and how infinite recursion can crash the program. 

// Stack Overflow 

function loop() {
  loop();
}

loop();

  • This causes Maximum call stack size exceeded error.

    Relationship Between Heap and Stack

    Memory HeapCall Stack
    Stores objectsStores execution contexts
    Large and dynamicSmall and fast
    Memory allocationExecution control

    Writing Optimized JavaScript Code

    What is Optimized JavaScript ?

    Optimized JavaScript means:

    • Faster execution

    • Less memory usage

    • Clean and readable code

    • Better user experience

Minimize DOM Access for Better Performance

Reduce repeated DOM calls by storing elements in variables to improve performance. 

// Bad Practice

document.getElementById("box").style.color = "red";
document.getElementById("box").style.fontSize = "20px";

// Good Practice

let box = document.getElementById("box");
box.style.color = "red";
box.style.fontSize = "20px";

  • Use let and const

    • Avoid var

    • Prevent scope bugs

    • Improve readability

      Avoid Deep Nesting

      Bad:

      if (a) {

        if (b) {

          if (c) {

            console.log("Yes");

          }

        }

      }

      Better:

      if (!a || !b || !c) return;

      console.log("Yes");

      Prefer Pure Functions

      Pure functions:

      • Do not modify external state

      • Always return same output for same input

      Use Modern JavaScript Features

      • Arrow functions

      • Template literals

      • Destructuring

      • Spread operator

    Pure Functions & Modern JavaScript Features

    Write predictable code using pure functions and modern JavaScript features like arrow functions and template literals. 

    // Pure Function

const greet = (name) => `Hello ${name}`;

console.log(greet("Rahul")); // Hello Rahul
    • Handle Errors Properly

    Error Handling

    Use try-catch to safely handle errors and prevent your application from crashing. 

    // Error Handling

try {
  riskyCode();
} catch (error) {
  console.error(error);
}

    • Avoid silent failures.

    ❮ Previous