What execution context is in Javascript - Step-by-Step Execution

Concept Flow - What execution context is

Start Program

↓

Create Global Execution Context

↓

Execute Global Code

↓

Function Called?

No→End

Yes↓

Create Function Execution Context

↓

Execute Function Code

↓

Function Returns

↓

Destroy Function Execution Context

↓

Back to Previous Context

↩Loop if more functions called

Execution context is like a container that holds information about the environment where JavaScript code runs, starting with the global context and creating new ones for each function call.

Execution Sample

Javascript

let x = 10;
function add(y) {
  return x + y;
}
let result = add(5);
console.log(result);

This code runs in the global context, then creates a new context when the function add is called.

Execution Table

Step	Execution Context	Action	Variables in Context	Output
1	Global	Declare x=10 and function add	x=10, add=function
2	Global	Call add(5)	x=10, add=function
3	Function add	Create context with y=5	y=5
4	Function add	Calculate x + y	x=10 (from outer), y=5
5	Function add	Return 15	y=5
6	Global	Assign result=15	x=10, add=function, result=15
7	Global	console.log(result)	x=10, add=function, result=15	15
8	Global	End program	x=10, add=function, result=15

💡 Program ends after global context finishes executing all code.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 6	Final
x	undefined	10	10	10	10
add	undefined	function	function	function	function
y	undefined	undefined	5	undefined	undefined
result	undefined	undefined	undefined	15	15

Key Moments - 2 Insights

Why does the function add have access to variable x even though x is not declared inside it?

Because the function execution context can access variables from its outer (global) context, as shown in step 4 where x=10 is used inside the function.

What happens to the function's variable y after the function finishes?

The function execution context is destroyed after returning, so y is no longer accessible in the global context, as seen in variable_tracker where y becomes undefined again after step 6.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'result' after step 6?

A 15

B 5

C undefined

D 10

💡 Hint

Check the 'Variables in Context' column at step 6 in the execution_table.

At which step is the function execution context created?

A Step 2

B Step 3

C Step 5

D Step 7

💡 Hint

Look for the step where 'Function add' context is mentioned in the execution_table.

If the function add did not return a value, what would be the output at step 7?

A 15

B NaN

C undefined

D Error

💡 Hint

Recall that if no return is given, functions return undefined by default.

Concept Snapshot

Execution context is the environment where JS code runs.
Global context is created first.
Each function call creates a new context.
Contexts hold variables and code info.
Contexts are destroyed after function ends.

Full Transcript

Execution context in JavaScript is like a container that holds all the information needed to run code. When a program starts, the global execution context is created. This context holds global variables and functions. When a function is called, a new execution context is created for that function. This function context has its own variables and parameters but can also access variables from outer contexts. After the function finishes running, its context is destroyed and control returns to the previous context. This process continues until the program ends.

Practice

1. What is an execution context in JavaScript?

easy

A. The environment where JavaScript code runs and variables/functions are accessible

B. A special type of variable that stores data temporarily

C. A function that executes automatically when the page loads

D. A tool used to debug JavaScript code in the browser

Solution

1. Step 1: Understand the meaning of execution context

   Execution context is the environment where JavaScript code runs, controlling variable and function access.

2. Step 2: Compare options with the definition

   Only The environment where JavaScript code runs and variables/functions are accessible correctly describes this environment; others describe unrelated concepts.

3. Final Answer:

   The environment where JavaScript code runs and variables/functions are accessible -> Option A

4. Quick Check:

   Execution context = environment for code execution [OK]

Hint: Execution context = where code runs and variables live [OK]

Common Mistakes:

• Confusing execution context with variables
• Thinking it's a debugging tool
• Mixing it up with functions

2. Which of the following is a valid type of execution context in JavaScript?

easy

A. Global, Function, and Block execution contexts

B. Local, Remote, and Server execution contexts

C. Compile-time, Run-time, and Debug execution contexts

D. Synchronous, Asynchronous, and Parallel execution contexts

Solution

1. Step 1: Recall the types of execution contexts

   JavaScript has three main execution contexts: Global, Function, and Block.

2. Step 2: Match options with known types

   Only Global, Function, and Block execution contexts lists the correct types; others list unrelated or incorrect terms.

3. Final Answer:

   Global, Function, and Block execution contexts -> Option A

4. Quick Check:

   Execution context types = Global, Function, Block [OK]

Hint: Remember the three main contexts: Global, Function, Block [OK]

Common Mistakes:

• Confusing execution context types with networking terms
• Mixing compile/run-time concepts
• Thinking async types are execution contexts

3. Consider the code:

let x = 10;
function foo() {
  let y = 20;
  console.log(x + y);
}
foo();

Which execution context is active when console.log runs?

medium

A. Global execution context only

B. Function execution context of foo

C. Block execution context inside foo

D. No execution context is active

Solution

1. Step 1: Identify where console.log is called

   It is inside the function foo, so the function's execution context is active.

2. Step 2: Understand execution context hierarchy

   When foo runs, its function execution context is created and active during console.log.

3. Final Answer:

   Function execution context of foo -> Option B

4. Quick Check:

   Inside function = function execution context active [OK]

Hint: Code inside function runs in function execution context [OK]

Common Mistakes:

• Thinking only global context is active
• Confusing block context with function context
• Believing no context is active during execution

4. Find the error in this code related to execution context:

function test() {
  console.log(a);
  let a = 5;
}
test();

medium

A. SyntaxError due to missing semicolon

B. No error, outputs 5

C. ReferenceError because a is used before declaration

D. TypeError because a is not a function

Solution

1. Step 1: Analyze variable declaration and usage

   a is declared with let after it is logged, so it is in the temporal dead zone.

2. Step 2: Understand execution context and hoisting

   let variables are not hoisted like var, causing a ReferenceError when accessed before declaration.

3. Final Answer:

   ReferenceError because a is used before declaration -> Option C

4. Quick Check:

   Accessing let before declaration = ReferenceError [OK]

Hint: Accessing let/const before declaration causes ReferenceError [OK]

Common Mistakes:

• Thinking it outputs undefined
• Confusing with var hoisting
• Ignoring temporal dead zone

5. You want to create a block execution context to limit variable scope inside an if statement. Which code correctly creates a block execution context?

hard

A. let x = 10;
console.log(x);

B. function test() {
var x = 10;
console.log(x);
}

C. if (true)
var x = 10;
console.log(x);

D. if (true) {
let x = 10;
console.log(x);
}

Solution

1. Step 1: Identify block execution context creation

   Block execution context is created by blocks like { ... } with let or const variables.

2. Step 2: Check each option for block scope

   if (true) {
     let x = 10;
     console.log(x);
   }

   uses let inside an if block, creating a block execution context. Others use function or global scope.

3. Final Answer:

   if (true) { let x = 10; console.log(x); } -> Option D

4. Quick Check:

   Block scope needs { } and let/const [OK]

Hint: Use { } with let/const to create block execution context [OK]

Common Mistakes:

• Using var inside if block expecting block scope
• Not using braces for block
• Confusing function scope with block scope