this in functions in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of this in a regular function call

What is the output of the following code snippet?

Javascript

function show() {
  return this.value;
}

const value = 10;
console.log(show());

A undefined

B 10

C ReferenceError

D null

💡 Hint

Think about what 'this' refers to in a regular function call in non-strict mode.

In a regular function call, 'this' refers to the global object (window in browsers). Since 'value' is declared with const and not attached to the global object, this.value is undefined.

❓ Predict Output

intermediate

this inside an arrow function

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

Javascript

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

A undefined

B TypeError

C 42

D null

💡 Hint

Remember how arrow functions handle 'this' differently than regular functions.

Arrow functions do not have their own 'this'. They use 'this' from the surrounding scope, which here is the global scope. Since value is not defined on the global object, this.value is undefined.

❓ Predict Output

advanced

this in method called with call()

What is the output of this code?

Javascript

const obj1 = { value: 5 };
const obj2 = { value: 10 };

function getValue() {
  return this.value;
}

console.log(getValue.call(obj2));

A TypeError

B 10

C undefined

D 5

💡 Hint

The call() method sets 'this' explicitly.

The call() method calls the function with this set to the first argument. Here, this is obj2, so this.value is 10.

❓ Predict Output

advanced

this in nested functions

What will this code output?

Javascript

const obj = {
  value: 100,
  outer: function() {
    function inner() {
      return this.value;
    }
    return inner();
  }
};

console.log(obj.outer());

A 100

B TypeError

C undefined

D ReferenceError

💡 Hint

Consider what 'this' refers to inside the inner function.

The inner function is a regular function call, so this inside it refers to the global object, not obj. Since value is not defined globally, it returns undefined.

🧠 Conceptual

expert

Understanding this binding in event handlers

In the following code, what will be logged when the button is clicked?

Javascript

const button = document.createElement('button');
button.textContent = 'Click me';

const obj = {
  value: 50,
  handleClick: () => {
    console.log(this.value);
  }
};

button.addEventListener('click', obj.handleClick);
document.body.appendChild(button);

A null

B 50

C TypeError

D undefined

💡 Hint

Think about how arrow functions capture 'this' and what 'this' refers to in this context.

The arrow function handleClick does not have its own this. It uses this from the surrounding scope, which is the global scope here. Since value is not defined globally, it logs undefined.