JavaScript Runtime

Execution Context, Call Stack & Hoisting

Learning Outcome

5

Understand Hoisting and its behavior

4

Create and use variables to store and manipulate data

3

Describe how Call Stack manages execution

2

Explain Execution Context and its types

Explain what a Dockerfile is

1

Understand how JavaScript executes code internally

6

Debug basic JavaScript execution problems

Restaurant Kitchen Analogy

Orders come → like function calls

Chef works one at a time → single-threaded

Orders stacked → last comes first served

This is called LIFO (Last In First Out)

Environment For Execution

whenever browser encounters → JS code it bringsJavascript Runtime Engine into Action

now it has to execute the Js code but 

How does it do that?

In JS engine there is Enviroment Called as Execution Context

What happens during code execution?

JavaScript allocates memory for variables and functions before execution starts

Every declaration gets stored in a dedicated environment

This environment, where memory allocation and execution happen, is called Execution Context

Now there are 2 types of EC

1 - Global Execution Context

When the JavaScript engine starts running a script file, it automatically creates a default environment called the Global Execution Context.

The Global Execution Context is the default environment where all code outside functions runs, and there is only one per JavaScript file.

How GEC encounters only one JS File ?

Frameworks like React and Angular use multiple JavaScript files

Managing many files directly can be complex

Tools like Webpack combine these files into bundles

This makes code execution more efficient and organized

what is WEBPACK?

Webpack is a popular JavaScript bundler used to manage and optimize the assets of modern web applications.

Webpack takes modules with dependencies (JavaScript, CSS, images, etc.)

It processes and combines them into one or more bundles

These bundles are optimized for faster delivery to the browser

This helps the JavaScript engine execute code more efficiently

2 - Functional execution Context

A Functional Execution Context (FEC) is created whenever a function is invoked, providing a separate environment to execute that function.

Key Characteristics of Functional Execution Context (FEC)

A new FEC is created for every function call

It manages local variables, arguments, and the value of this

Each FEC has its own scope, preventing conflicts with other functions

It is temporary and gets removed after the function execution completes

FEC enables concepts like closures and proper function isolation

Why are there different Execution Contexts (EC)?

JavaScript doesn’t run everything in one single environment.

Instead, it creates a new Execution Context for each function call to properly manage:

variables           scope            function behavior

This ensures isolation + proper execution flow

 Every Execution Context has 3 Core Components

Variable Object / Arguments Object

 Scope & Scope Chain (Lexical Environment)

this Binding

1) Variable Object / Arguments Object

What it contains:

Function parameters (arguments)

 

Variable declarations (var, let, const)

 

Function declarations

Example : 

function add(a, b) {
  var sum = a + b;
}

Behavior:

Memory is allocated during the creation phase

  • Initial values:
    • var → undefined
    • let/const → uninitialized (TDZ)
    • functions → full definition stored

Inside this function EC:

  • a, b → arguments object
  • sum → variable stored in memory

2) Scope & Scope Chain (Lexical Environment)

This defines where variables can be accessed from

Scope:

 

Determines visibility of variables

 

Each EC has its own local scope

Scope Chain:

 

If a variable is not found in current scope


JS looks in outer (parent) scope


continues until global scope

let x = 10;

function outer() {
  let y = 20;

  function inner() {
    console.log(x, y);
  }

  inner();
}

Inside inner() EC:

  • JS looks for:
    • x → not in inner → found in global
    • y → found in outer

This chain = Scope Chain

3) this Binding

Hello World Program

The first program everyone writes:

print("Hello World")

Output:

Hello World

Steps:

Open Python/Colab

Type code

Run → see output

Insight:

This confirms your Python setup is working correctly

Summary

4

It is used in web development, AI, data science, and automation

3

Python is simple, powerful, and widely used across industries

2

Languages are categorized into low, medium, and high-level based on abstraction

1

Programming languages help humans communicate with computers effectively

Quiz

Who created Python?

A. Bill Gates

B. Elon Musk

C. Guido van Rossum

D. Mark Zuckerberg

Quiz-Answer

Who created Python?

A. Bill Gates

B. Elon Musk

C. Guido van Rossum

D. Mark Zuckerberg