Top 5 JavaScript Interview Problems (With Real-World Solutions)

Chapter 3: Understanding this and Arrow Functions (with Real Challenges)

🧠 Why This Matters

If there's one concept in JavaScript that's infamous for confusing even seasoned developers, it's the this keyword. Combined with arrow functions (introduced in ES6), understanding this is critical for debugging, writing clean callbacks, and avoiding weird runtime errors.

Interviewers love to test your depth here — not just the definitions, but whether you can predict, debug, and refactor real code using this and arrow functions correctly.

In this chapter, you’ll:

• Learn how this behaves in regular functions, arrow functions, and methods
• Understand how this changes depending on context
• Solve real-world bugs involving callbacks, timers, and DOM events
• Master arrow function traps in object methods and classes

📍 1. What Is this?

In JavaScript, this refers to the context in which a function is executed.

It’s not determined when the function is defined — but when it’s called.

✅ Example 1: Global Context

console.log(this); // In browser: `window`, in Node.js: `{}` or `global`

✅ Example 2: Inside an Object Method

const user = {

  name: "Ava",

  greet() {

    console.log(this.name); // ✅ Ava

  }

};

user.greet();

⚠️ Example 3: Detached Function (Lost Context)

const user = {

  name: "Zain",

  greet() {

    console.log(this.name);

  }

};

const fn = user.greet;

fn(); // ❌ undefined (because `this` = global)

The method lost its context — this became global.

⚡ Arrow Functions: No Own this

Arrow functions don’t have their own this. Instead, they inherit this from the parent (lexical scope).

✅ Example 4: Arrow Function Inside Method

const team = {

  name: "Dev Squad",

  members: ["Ali", "Sara"],

  logMembers() {

    this.members.forEach(member => {

      console.log(`${member} - ${this.name}`);

    });

  }

};

team.logMembers();

// ✅ Ali - Dev Squad

// ✅ Sara - Dev Squad

✅ Works because arrow function captures this from logMembers

🚫 Example 5: Arrow Function as Object Method

const obj = {

  name: "Fail",

  greet: () => {

    console.log(this.name); // ❌ undefined

  }

};

obj.greet();

Arrow functions don’t get their own this, and in this case, this refers to the global object — not obj.

🚀 Real Interview Challenge #1: Fix the Callback this Bug

const user = {

  name: "Lina",

  greet() {

    setTimeout(function () {

      console.log(`Hi, I'm ${this.name}`);

    }, 1000);

  }

};

user.greet(); // ❌ Hi, I'm undefined

✅ Fix using arrow function:

setTimeout(() => {

  console.log(`Hi, I'm ${this.name}`);

}, 1000);

✅ Or save this into a variable:

const self = this;

setTimeout(function () {

  console.log(`Hi, I'm ${self.name}`);

}, 1000);

🧠 Real Interview Challenge #2: Predict the Output

const person = {

  name: "John",

  greet: function () {

    console.log("Hi " + this.name);

  }

};

const greetFn = person.greet;

greetFn(); // ???

✅ Answer: Hi undefined
Why? The function was detached from person, and this is now the global object (in browser: window.name or undefined)

🧠 Real Interview Challenge #3: Use bind() to Fix Context

const dog = {

  sound: "woof",

  speak() {

    console.log(this.sound);

  }

};

const speakNow = dog.speak.bind(dog);

speakNow(); // ✅ woof

bind() permanently sets the value of this

🔁 Arrow Functions in Classes

class Timer {

  constructor() {

    this.seconds = 0;

  }

  start() {

    setInterval(() => {

      this.seconds++;

      console.log(this.seconds);

    }, 1000);

  }

}

const t = new Timer();

t.start(); // ✅ Arrow function uses `this` from class instance

❌ Common Mistakes

✅ Summary