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.

Practice

1.

What is true about this in arrow functions compared to regular functions?

easy

A. this in arrow functions is inherited from the surrounding code where they are created.

B. this in arrow functions always refers to the global object.

C. this in arrow functions is undefined.

D. this in arrow functions refers to the function itself.

Solution

1. Step 1: Understand how this works in arrow functions

   Arrow functions do not have their own this. Instead, they use the this value from the surrounding (lexical) context where they are created.

2. Step 2: Compare with other options

   Options B, C, and D are incorrect because arrow functions do not bind this to the global object, undefined, or themselves.

3. Final Answer:

   this in arrow functions is inherited from the surrounding code where they are created. -> Option A

4. Quick Check:

   this in arrow functions = lexical this [OK]

Hint: Arrow functions use surrounding this, not their own [OK]

Common Mistakes:

• Thinking arrow functions have their own this
• Confusing arrow functions with regular functions
• Assuming this is always global in arrow functions

2.

Which of the following is the correct syntax to define an arrow function that logs this.name?

const obj = { name: 'Alice', logName: ??? }

easy

A. logName: function log() { console.log(this.name) }

B. logName: function() { console.log(this.name) }

C. logName: () { console.log(this.name) }

D. logName: () => console.log(this.name)

Solution

1. Step 1: Identify arrow function syntax

   Arrow functions use the syntax () => expression or () => { statements }. logName: () => console.log(this.name) uses the correct concise syntax.

2. Step 2: Check other options

   Options B and D use regular function() syntax, not arrow functions. logName: () { console.log(this.name) } () { console.log(this.name) } is missing the fat arrow =>, resulting in a syntax error. Note: even with correct arrow syntax as an object method, this would refer to the lexical scope (global), not the object.

3. Final Answer:

   logName: () => console.log(this.name) -> Option D

4. Quick Check:

   Arrow function syntax = logName: () => console.log(this.name) [OK]

Hint: Arrow function syntax: () => expression or () => { } [OK]

Common Mistakes:

• Forgetting the fat arrow '=>'
• Using function keyword instead of arrow syntax
• Confusing arrow function with method shorthand

3.

What will be the output of this code?

const person = {
  name: 'Bob',
  greet: () => {
    console.log(this.name);
  }
};
person.greet();

medium

A. undefined

B. '' (empty string)

C. Error

D. Bob

Solution

1. Step 1: Understand this in arrow functions inside objects

   The arrow function greet does not have its own this. It uses this from the surrounding scope, which is the global scope here.

2. Step 2: Check global this.name

   In most environments, this.name in global scope is undefined unless explicitly set.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Arrow function this = lexical this (global) [OK]

Hint: Arrow functions use outer this, not object [OK]

Common Mistakes:

• Expecting this to be the object
• Confusing arrow function with regular method
• Assuming global this.name is set

4.

Find the error in this code and fix it so that this.name inside greet refers to the user object:

const user = {
  name: 'Carol',
  greet: () => {
    console.log(this.name);
  }
};
user.greet();

medium

A. Use function greet() { console.log(this.name); } outside the object

B. Add bind(user) to the arrow function

C. Change greet to a regular function: greet() { console.log(this.name); }

D. Replace this.name with user.name inside arrow function

Solution

1. Step 1: Identify why this.name is incorrect

   Arrow functions do not have their own this, so inside greet, this is not the user object.

2. Step 2: Fix by using a regular function method

   Defining greet as a regular function method binds this to the user object when called as user.greet().

3. Final Answer:

   Change greet to a regular function: greet() { console.log(this.name); } -> Option C

4. Quick Check:

   Use regular function for object methods needing this [OK]

Hint: Use regular functions for object methods needing this [OK]

Common Mistakes:

• Trying to bind this to arrow functions
• Using arrow functions for object methods expecting this
• Accessing object properties via global this

5.

You want to create an object with a method that uses a callback to print the object's name property after 1 second. Which code correctly uses arrow functions to keep this referring to the object?

const obj = {
  name: 'Dave',
  printName: function() {
    setTimeout(??? , 1000);
  }
};
obj.printName();

hard

A. function() { console.log(this.name) }

B. () => console.log(this.name)

C. function() { console.log(obj.name) }

D. () => { console.log(obj.name) }

Solution

1. Step 1: Understand this inside setTimeout callback

   Inside setTimeout, a regular function's this is global or undefined, so it loses the object context.

2. Step 2: Use arrow function to inherit this from printName

   Using an arrow function as callback keeps this from printName, which is the object obj.

3. Final Answer:

   () => console.log(this.name) -> Option B

4. Quick Check:

   Arrow function callback keeps this from method [OK]

Hint: Use arrow function callbacks to keep this context [OK]

Common Mistakes:

• Using regular function losing this context
• Referencing object by name inside callback (less flexible)
• Not using arrow function for callbacks needing this