Function execution context in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of nested function with variable shadowing

What is the output of the following JavaScript code?

Javascript

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

A 20

B 10

C undefined

D ReferenceError

💡 Hint

Think about which x the inner function uses.

The inner function has its own x variable which shadows the outer one. So it returns 20.

❓ Predict Output

intermediate

Value of 'this' inside a regular function

What will be logged to the console when this code runs?

Javascript

const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};
const getValue = obj.getValue;
console.log(getValue());

A 42

B null

C TypeError

D undefined

💡 Hint

Consider what this refers to when the function is called alone.

When getValue is called without an object, this is undefined in strict mode, so this.value is undefined.

❓ Predict Output

advanced

Output of function with arguments object

What is the output of this code snippet?

Javascript

function test(a, b) {
  arguments[0] = 100;
  return a + b;
}
console.log(test(1, 2));

A TypeError

B 3

C 102

D NaN

💡 Hint

Remember how the arguments object relates to named parameters.

In non-strict mode, changing arguments[0] changes a. So a becomes 100, b is 2, sum is 102.

❓ Predict Output

advanced

Output of arrow function and 'this' binding

What will this code print?

Javascript

const obj = {
  value: 10,
  arrowFunc: () => this.value,
  regularFunc() {
    return this.value;
  }
};
console.log(obj.arrowFunc());
console.log(obj.regularFunc());

A 10 and 10

B undefined and 10

C undefined and undefined

D TypeError and 10

💡 Hint

Think about how arrow functions handle this compared to regular functions.

Arrow functions do not have their own this, so this.value is undefined. Regular function uses object context, returns 10.

🧠 Conceptual

expert

Function execution context and closures

Consider this code. What will be the output and why?

Javascript

function createCounter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  };
}
const counter1 = createCounter();
const counter2 = createCounter();
console.log(counter1());
console.log(counter1());
console.log(counter2());

A 1, 2, 1

B 1, 1, 1

C 0, 1, 0

D 1, 2, 2

💡 Hint

Each call to createCounter creates a new closure with its own count.

Each counter has its own count. counter1 increments twice (1 then 2), counter2 starts fresh at 1.

Practice

1. What does the function execution context in JavaScript primarily keep track of?

easy

A. Variables and parameters inside the function

B. The browser window size

C. The user's keyboard input globally

D. The network requests made by the page

Solution

1. Step 1: Understand what execution context means

   The function execution context is created when a function runs and it keeps track of what happens inside that function.

2. Step 2: Identify what is tracked inside the function

   It specifically keeps track of variables and parameters declared or passed inside the function.

3. Final Answer:

   Variables and parameters inside the function -> Option A

4. Quick Check:

   Execution context tracks variables and parameters [OK]

Hint: Execution context tracks function's own variables and parameters [OK]

Common Mistakes:

• Thinking it tracks global browser info
• Confusing with event listeners
• Assuming it tracks network requests

2. Which of the following is the correct way to define a function in JavaScript that creates a new execution context when called?

easy

A. var greet = 'Hi';

B. function greet() { console.log('Hi'); }

C. console.log('Hi');

D. if (true) { console.log('Hi'); }

Solution

1. Step 1: Identify function declaration syntax

   Only the syntax starting with the keyword function defines a function that creates an execution context when called.

2. Step 2: Check other options

   Options B, C, and D do not define functions; they are variable assignment or direct statements.

3. Final Answer:

   function greet() { console.log('Hi'); } -> Option B

4. Quick Check:

   Function declaration uses function keyword [OK]

Hint: Look for the 'function' keyword to define a function [OK]

Common Mistakes:

• Confusing variable assignment with function definition
• Thinking console.log alone defines a function
• Using if statement as a function

3. What will be the output of the following code?

function test() {
  let x = 5;
  return x + 3;
}
console.log(test());

medium

A. undefined

B. 5

C. 8

D. Error

Solution

1. Step 1: Analyze the function body

   The function test declares a variable x with value 5 inside its execution context.

2. Step 2: Calculate the return value

   The function returns x + 3, which is 5 + 3 = 8.

3. Final Answer:

   8 -> Option C

4. Quick Check:

   Return value is 5 + 3 = 8 [OK]

Hint: Add local variable and return value inside function [OK]

Common Mistakes:

• Confusing return value with variable value
• Expecting undefined because of missing global variable
• Thinking function does not return anything

4. Identify the error in the following code related to function execution context:

function add() {
  console.log(sum);
  let sum = 10 + 5;
}
add();

medium

A. TypeError because sum is not a function

B. No error, outputs 15

C. SyntaxError due to missing return statement

D. ReferenceError because 'sum' is used before declaration

Solution

1. Step 1: Understand variable hoisting with let

   Variables declared with let are not hoisted like var. Accessing them before declaration causes ReferenceError.

2. Step 2: Check the console.log usage

   The code tries to log sum before it is declared, causing ReferenceError.

3. Final Answer:

   ReferenceError because 'sum' is used before declaration -> Option D

4. Quick Check:

   Using let variable before declaration causes ReferenceError [OK]

Hint: Don't access let variables before declaration inside function [OK]

Common Mistakes:

• Assuming let variables are hoisted like var
• Expecting output 15 without error
• Confusing ReferenceError with SyntaxError

5. Consider this code:

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

What does this example demonstrate about function execution contexts?

hard

A. Inner function can access variables of outer function's execution context

B. Inner function cannot access outer function variables

C. Outer function loses its execution context after returning

D. Variables declared in inner function are global

Solution

1. Step 1: Understand nested function execution contexts

   The inner function creates its own execution context but can access variables from the outer function's context due to closure.

2. Step 2: Analyze the return value

   The inner function returns a + b where a is from outer context and b is local, showing access to outer variables.

3. Final Answer:

   Inner function can access variables of outer function's execution context -> Option A

4. Quick Check:

   Closures allow inner functions to access outer variables [OK]

Hint: Inner functions access outer variables via closure [OK]

Common Mistakes:

• Thinking inner function variables are global
• Assuming outer context is lost immediately
• Believing inner cannot access outer variables