Easy'this' Binding🐛 Debug Challenge

Arrow function as object method has no own this

Buggy Code — Can you spot the issue?

const obj = {
  name: 'JSPrep',
  greet: () => console.log('Hi from ' + (this && this.name)),
};

obj.greet();

Fixed Code

const obj = {
  name: 'JSPrep',
  greet() { console.log('Hi from ' + this.name); },
};

obj.greet();

Bug Explained

Bug: Arrow functions inherit this from the enclosing lexical scope. At the module level this is undefined — not obj.

Explanation: Regular method shorthand greet() { } has its own this, correctly set to obj when called as obj.greet().

Key Insight: Never use arrow functions as object methods that rely on this. Use method shorthand instead.

More 'this' Binding Debug Challenges

EasyMethod detached from object loses thisMediumRegular callback inside method loses thisMediumbind is permanent — call cannot override it

Practice spotting bugs live →

38 debug challenges with AI hints

🐛 Try Debug Lab