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.