this with arrow functions in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of this in arrow function inside object method

What is the output of the following code?

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

Javascript

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

A null

B 42

C undefined

D TypeError

💡 Hint

Remember arrow functions do not have their own 'this'.

Arrow functions do not have their own 'this'. Here, 'this' refers to the outer scope, which is the global object or undefined in strict mode. Since 'value' is not defined there, the result is undefined.

❓ Predict Output

intermediate

this in arrow function inside regular function

What will be logged by this code?

function Person() {
  this.age = 25;
  this.getAge = () => this.age;
}
const p = new Person();
console.log(p.getAge());

Javascript

function Person() {
  this.age = 25;
  this.getAge = () => this.age;
}
const p = new Person();
console.log(p.getAge());

A TypeError

B 0

C undefined

D 25

💡 Hint

Arrow function inherits 'this' from the surrounding function.

Inside the constructor, 'this' refers to the new object. The arrow function captures this 'this', so 'this.age' is 25.

❓ Predict Output

advanced

this in nested arrow functions

What is the output of this code?

const obj = {
  value: 10,
  method() {
    const arrow1 = () => {
      const arrow2 = () => this.value;
      return arrow2();
    };
    return arrow1();
  }
};
console.log(obj.method());

Javascript

const obj = {
  value: 10,
  method() {
    const arrow1 = () => {
      const arrow2 = () => this.value;
      return arrow2();
    };
    return arrow1();
  }
};
console.log(obj.method());

A 10

B undefined

C TypeError

D 0

💡 Hint

Arrow functions inherit 'this' from the surrounding context.

Both arrow functions inherit 'this' from 'method', which is called on 'obj'. So 'this.value' is 10.

❓ Predict Output

advanced

this in arrow function used as event handler

What will this code log when the button is clicked?

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

button.addEventListener('click', () => {
  console.log(this);
});

Javascript

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

button.addEventListener('click', () => {
  console.log(this);
});

A button element

B Window object

C undefined

D Event object

💡 Hint

Arrow functions do not have their own 'this', so it uses the outer scope's 'this'.

The arrow function uses the 'this' from the outer scope, which is the global Window object in browsers.

🧠 Conceptual

expert

Why arrow functions are not suitable as object methods

Why should arrow functions generally not be used as methods inside objects?

Choose the best explanation.

A Because arrow functions do not have their own 'this', so 'this' inside them does not refer to the object itself.

B Because arrow functions are slower than regular functions when used as methods.

C Because arrow functions cannot access object properties at all.

D Because arrow functions always return undefined when used as methods.

💡 Hint

Think about how 'this' behaves differently in arrow functions.

Arrow functions inherit 'this' from their surrounding scope, so inside an object method, 'this' will not refer to the object, causing unexpected behavior.