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.