What execution context is in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Execution Context in JavaScript

What does the term execution context mean in JavaScript?

A It is the environment where JavaScript code is evaluated and executed.

B It is a special function that runs before any other code.

C It is the object that stores all variables globally.

D It is the browser tab where JavaScript runs.

💡 Hint

Think about where the code runs and what information it needs to run.

The execution context is the environment where JavaScript code is processed. It contains information like variables, functions, and the value of this. It is created whenever code runs.

❓ Predict Output

intermediate

Output of code with nested execution contexts

What is the output of this JavaScript code?

Javascript

function outer() {
  let a = 10;
  function inner() {
    let a = 20;
    console.log(a);
  }
  inner();
  console.log(a);
}
outer();

A undefined\n10

B 10\n20

C 20\n10

D 20\n20

💡 Hint

Remember each function has its own execution context with its own variables.

The inner function has its own execution context where a is 20. The outer function's context has a as 10. So, inner() logs 20, then outer() logs 10.

❓ Predict Output

advanced

Value of variable after execution contexts

What will be the value of result after running this code?

Javascript

var x = 5;
function test() {
  var x = 10;
  if (true) {
    let x = 20;
  }
  return x;
}
var result = test();

A 5

B 10

C 20

D undefined

💡 Hint

Look at the scope of each x and which one is returned.

The let x = 20 is block-scoped inside the if block and does not affect the var x = 10 in the function scope. The function returns the x declared with var, which is 10.

🧠 Conceptual

advanced

Execution Context and the Call Stack

Which statement best describes the relationship between execution context and the call stack in JavaScript?

A Execution contexts are stored in the heap, not the call stack.

B The call stack stores all variables and functions globally.

C The call stack is used only for asynchronous code execution.

D The call stack keeps track of execution contexts in the order they are created and destroyed.

💡 Hint

Think about how JavaScript manages running multiple functions.

The call stack is a data structure that keeps track of all execution contexts in the order they are created and removed. When a function runs, its execution context is pushed onto the stack; when it finishes, it is popped off.

❓ Predict Output

expert

Output involving execution context and hoisting

What is the output of this JavaScript code?

Javascript

console.log(a);
var a = 10;
function foo() {
  console.log(a);
  var a = 20;
  console.log(a);
}
foo();
console.log(a);

A undefined\nundefined\n20\n10

B undefined\n10\n20\n10

C 10\nundefined\n20\n10

D ReferenceError\nundefined\n20\n10

💡 Hint

Remember how var variables are hoisted and initialized as undefined.

Before any code runs, var a is hoisted and initialized as undefined. So, the first console.log(a) prints undefined. Inside foo, var a is hoisted and initialized as undefined, so the first log inside foo is undefined. Then a is set to 20 and logged. Finally, outside foo, a is 10.

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