Quiz: Predict the Output — this

Test Your this Binding Mastery

Think you've got this figured out? Let's find out. For each question, apply the four rules in priority order: new > explicit (call/apply/bind) > implicit (dot) > default (plain call). Remember that arrow functions don't follow these rules — they inherit this lexically.

All examples run in strict mode (default this is undefined, not globalThis). Don't just guess — trace the rules step by step.

---

Question 1: The Basic Dot Rule

"use strict";
const obj = {
  name: "Alice",
  getName() {
    return this.name;
  }
};

const fn = obj.getName;
console.log(fn());

---

Question 2: Arrow in an Object

"use strict";
const obj = {
  name: "Alice",
  getName: () => {
    return this.name;
  }
};

console.log(obj.getName());

---

Question 3: Arrow Inside a Method

"use strict";
const obj = {
  name: "Alice",
  greet() {
    const inner = () => this.name;
    return inner();
  }
};

console.log(obj.greet());

---

Question 4: Bind vs Call Priority

This one trips up even senior devs.

"use strict";
function showName() {
  return this.name;
}

const bound = showName.bind({ name: "Bound" });
console.log(bound.call({ name: "Called" }));

---

Question 5: New vs Bind

"use strict";
function Person(name) {
  this.name = name;
}

const BoundPerson = Person.bind({ name: "Bound" });
const p = new BoundPerson("Alice");
console.log(p.name);

---

Question 6: Callback Context Loss

"use strict";
class Timer {
  constructor() {
    this.count = 0;
  }
  increment() {
    this.count++;
  }
  start() {
    // Passing this.increment as a callback
    [1, 2, 3].forEach(this.increment);
  }
}

const t = new Timer();
t.start();

---

Question 7: Nested Method Calls

"use strict";
const a = {
  name: "A",
  inner: {
    name: "B",
    getName() {
      return this.name;
    }
  }
};

const fn = a.inner.getName;
console.log(a.inner.getName());
console.log(fn());

---

Question 8: setTimeout and Arrow Functions

Last one. This combines everything you've learned.

"use strict";
const obj = {
  value: 42,
  delayedLog() {
    setTimeout(function() {
      console.log("regular:", this?.value);
    }, 0);
    setTimeout(() => {
      console.log("arrow:", this.value);
    }, 0);
  }
};

obj.delayedLog();

---

Scoring Guide