Interview answer drill

Use this JavaScript interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow JavaScript mastery study plan Practice more JavaScript interview questions

Explain the `this` keyword in JavaScriptFrontend interview answer

HighIntermediateJavascript

By FrontendAtlas Team · Updated Apr 10, 2026

Interview focus

This JavaScript interview question tests whether you can explain JavaScript this: detached method bugs, bind fixes, and module follow-ups, connect it to production trade-offs, and handle common follow-up questions.

JavaScript this: detached method bugs, bind fixes, and module follow-ups explanation without falling back to memorized docs wording
Binding and Context reasoning, edge cases, and production failure modes
How you would answer the most likely JavaScript interview follow-up

Practice more JavaScript interview questions

Interview quick answer

The value of this is a call-site problem, not a definition-site feature. Strong answers show detached methods, callback context loss, module and class-field follow-ups, and when bind() or arrows are the right fix.

Full interview answer

The Core Idea

The value of this is determined by how a function is called, not by where it is written. The most common production/debug failure is extracting a method, passing it to a browser or framework callback, and then discovering the receiver disappeared.

So the useful mental model is not 'owner of the function' but 'receiver at call time.'

Call Type	Value of `this`	Example
Global / Default	In browsers → `window`, in strict mode → `undefined`	`console.log(this)`
Object method	The object before the dot	`user.sayHi()` → `this === user`
Constructor	The newly created instance	`new Person()`
Explicit binding	Set manually using `call`, `apply`, or `bind`	`fn.call(obj)` → `this === obj`
Arrow function	Does not bind `this`; inherits it from its outer scope	`() => this` inside an object → outer `this`

How `this` changes based on how the function is called.

JAVASCRIPT

// Example 1: Default binding
function show() {
  console.log(this);
}
show(); // window (or undefined in strict mode)

JAVASCRIPT

// Example 2: Method call
const user = {
  name: 'Mia',
  greet() {
    console.log('Hi, ' + this.name);
  }
};
user.greet(); // 'Hi, Mia'

JAVASCRIPT

// Example 3: Detached method loses context
const greetFn = user.greet;
greetFn(); // undefined or 'Hi, undefined' — this is lost

Fixing Lost Context

You can control or preserve this explicitly using:

call() / apply() → call immediately

bind() → return a new function with fixed this

JAVASCRIPT

const boundGreet = user.greet.bind(user);
boundGreet(); // 'Hi, Mia'

Same function, different call sites

This is the shortest mental-model check: the function body stays the same, but the receiver changes with the call site.

JAVASCRIPT

const account = {
  name: 'Mia',
  greet() {
    return `Hi, ${this.name}`;
  }
};

console.log(account.greet()); // 'Hi, Mia'

const detached = account.greet;
console.log(detached()); // TypeError or 'Hi, undefined'

const rebound = account.greet.bind(account);
console.log(rebound()); // 'Hi, Mia'

Arrow Functions

Arrow functions don’t have their own this. They inherit it from the surrounding scope. Great for callbacks that need lexical this.

JAVASCRIPT

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++;
    console.log(this.seconds);
  }, 1000);
}
new Timer(); // works fine

// But using a normal function would break:
// setInterval(function() { this.seconds++ }, 1000); // this = undefined

Follow-up cases interviewers ask next

In ES modules, top-level this is undefined.

Class-field arrow methods capture the instance this once and cannot be rebound.

An extracted method stops being a method until you call it with a receiver or bind it.

Common Pitfalls

Forgetting new → this becomes global (or undefined in strict mode)

Losing context when passing methods as callbacks

Misusing arrow functions in class methods (they can’t be rebound)

Practical scenario
A class method passed as a callback loses this, breaking access to instance state.

Common pitfalls

Forgetting to bind methods in constructors.
Using arrow functions and expecting dynamic this.
Calling functions without a receiver in strict mode.

Trade-off or test tip
Binding is explicit but creates new functions. Test with call/apply/bind and verify this values.

Still so complicated?

Think of this as the person holding the phone 📱 — not the number you dialed. The number (function) stays the same, but who picks up (the object that calls it) decides what this will be.

Summary

this depends on the call site, not where the function is defined.

Arrow functions don’t have their own this.

call, apply, and bind let you control this explicitly.

new creates a new object and binds this to it.