Debugging scenarioMedium~7 minJavaScript Language & Async Semantics / 4 of 9

Interview question

A method works when called directly but loses its receiver when passed as a callback. What happened?

Explains call-site-dependent this binding and compares wrapper, bind, and arrow-function fixes.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

For an ordinary function, this is determined by how the function is called. service.save() supplies service as the receiver, but passing service.save as a callback loses that call-site relationship. In strict mode the callback's this is usually undefined. I can preserve intent with a wrapper such as value => service.save(value) or with service.save.bind(service).

Full answer below

Practice focus

Whether the candidate can diagnose receiver loss without claiming that `this` is lexical in ordinary functions.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
Passing object.method passes a function value. It does not permanently carry the object from the original property access.
For an ordinary function, this is determined by how the function is called. service.save() supplies service as the receiver, but passing service.save as a callback loses that call-site relationship. In strict mode the callback's this is usually undefined. I can preserve intent with a wrapper such as value => service.save(value) or with service.save.bind(service).
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would verify the callback contract before choosing a fix because some APIs deliberately supply their own receiver. An arrow wrapper captures the surrounding this lexically, while bind creates a function with a fixed receiver and can also pre-fill arguments. Defining every method as an arrow field can work, but it creates a function per instance and changes prototype behavior, so it should be a deliberate class design.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
The reliable mental model is reference plus call form: evaluating a method and invoking that reference later are separate operations. I avoid fixes that depend on incidental framework binding. At API boundaries I prefer callbacks that take all required dependencies explicitly, which makes ownership and tests clearer. When class methods must be callbacks, I bind once at construction or use a stable wrapper rather than rebinding during every render.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Saying this always points to where a function was defined.
Adding bind without checking whether the callback API supplies a receiver.
Confusing an arrow function's lexical this with an ordinary method.
Rebinding repeatedly in a hot render path.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

The answer cannot explain why direct invocation works.
Global-object fallback is assumed in modern strict module code.
The fix changes callback identity without considering subscriptions or removal.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How does an arrow function treat this?
What does bind return?
Why can callback identity matter in UI code?

Continue the section

Next in JavaScript Language & Async Semantics: Prototypes and classes

Step 5 of 9

How does JavaScript's prototype model relate to class syntax?

Practice route

Read core answer Review checklist Follow-up prompts Track progress

Finished this drill?

Practice freely. Sign in only when you want to save completion, confidence, notes, or bookmarks.

New to Aporeon? Create account

Drill details

Human editorial direction

Aporeon is shaped by Aleksandar Tomovski, a software developer with experience on both sides of technical interviews. Content is reviewed for accuracy, natural spoken delivery, useful depth, and honest trade-offs.

About the creator Editorial standards

Was this drill useful?

Help improve the interview library.

Found this answer useful?

Say thanks with a standalone, one-time $5 contribution. No account required.

No subscription or perks.Choose another amount

Opening drill

Debugging scenarioMedium~7 minJavaScript Language & Async Semantics / 4 of 9

Interview question

A method works when called directly but loses its receiver when passed as a callback. What happened?

Explains call-site-dependent this binding and compares wrapper, bind, and arrow-function fixes.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Full answer below

Practice focus

Whether the candidate can diagnose receiver loss without claiming that `this` is lexical in ordinary functions.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
Passing object.method passes a function value. It does not permanently carry the object from the original property access.
For an ordinary function, this is determined by how the function is called. service.save() supplies service as the receiver, but passing service.save as a callback loses that call-site relationship. In strict mode the callback's this is usually undefined. I can preserve intent with a wrapper such as value => service.save(value) or with service.save.bind(service).
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
I would verify the callback contract before choosing a fix because some APIs deliberately supply their own receiver. An arrow wrapper captures the surrounding this lexically, while bind creates a function with a fixed receiver and can also pre-fill arguments. Defining every method as an arrow field can work, but it creates a function per instance and changes prototype behavior, so it should be a deliberate class design.
Finish
Advanced answer
Optional deeper angle for production judgment and nuance.
The reliable mental model is reference plus call form: evaluating a method and invoking that reference later are separate operations. I avoid fixes that depend on incidental framework binding. At API boundaries I prefer callbacks that take all required dependencies explicitly, which makes ownership and tests clearer. When class methods must be callbacks, I bind once at construction or use a stable wrapper rather than rebinding during every render.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Saying this always points to where a function was defined.
Adding bind without checking whether the callback API supplies a receiver.
Confusing an arrow function's lexical this with an ordinary method.
Rebinding repeatedly in a hot render path.

Red flagsCandidateRed flagsSignals that an interviewer may treat as risky.Open details

Details

The answer cannot explain why direct invocation works.
Global-object fallback is assumed in modern strict module code.
The fix changes callback identity without considering subscriptions or removal.

Follow-up prompts

Quick interviewer prompts inside this drill.

Follow-up questionsCandidateFollow-up questionsLikely next questions after the main answer.Open details

Details

Treat these as the next interviewer turn. Answer one out loud, then save the gap in your practice notes.

How does an arrow function treat this?
What does bind return?
Why can callback identity matter in UI code?

Continue the section

Next in JavaScript Language & Async Semantics: Prototypes and classes

Step 5 of 9

How does JavaScript's prototype model relate to class syntax?

A method works when called directly but loses its receiver when passed as a callback. What happened?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue the section

A method works when called directly but loses its receiver when passed as a callback. What happened?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue the section