Preserve method context
A callback inside an object method needs to access the method's object context.
JS Puzzles · Const
Arrow function this
Arrow functions do not have their own this; they read it from the surrounding context. This makes them useful as callbacks inside methods when the callback must preserve the method's object context.
How it works
An arrow function does not create its own this. When it uses this, JavaScript looks outward to the enclosing lexical environment, so the value comes from the surrounding regular function or method rather than from the way the arrow callback is invoked.
Syntax
(...args) => expression
(...args) => { body }Key points
- An arrow function does not define a new
thisbinding. - A
thisreference inside an arrow resolves through the enclosing scope. - An arrow callback in
forEachcan directly reuse the surrounding method'sthis. - In the documented pattern, the callback can reach the containing object's
titlethrough the inherited context. - The missing own
thisis part of a broader limitation: arrows also lack a localargumentsbinding.
Common mistakes
- An arrow function cannot be invoked with
new, so it cannot serve as a constructor. - An arrow function cannot receive a method-style
this; using it as an object method will not makethisrefer to that object. - An arrow function is not equivalent to calling
bind(this): it closes over the outerthisinstead of creating a separately bound function.
Example: Arrow callback preserves the surrounding this
const group = {
title: "Developers",
showList() {
["Ada", "Linus"].forEach(name => {
console.log(`${this.title}: ${name}`);
});
}
};
group.showList();The callback is an arrow function, so it reads this from showList() and preserves the object context.
When to use it
Concise callbacks
A small callback should use surrounding state without manually binding a regular function.
Non-constructor functions
A function should intentionally reject constructor-style invocation.
Interview questions
QHow does this differ in an arrow callback and a regular callback?
Arrow functions do not have their own this; they obtain it from the surrounding lexical environment. Therefore, a callback arrow inside an object method can use the method's this without losing the object context.
Follow-up: What happens if call() supplies another context? The arrow ignores that attempted context because its this is determined outside the arrow.
QWhen is an arrow function useful inside an object method?
A regular function gets this according to how it is called, while an arrow function takes this from outside. This makes arrows useful when a callback should preserve the surrounding method context.
Follow-up: Why not use an arrow for every method? A method often needs its caller-dependent this, which an arrow cannot provide.
QWhat limitations follow from an arrow function's missing this?
Arrow functions have no own this, arguments, or constructor behavior. They also cannot be called with new, so they are intended for functions and callbacks rather than constructor roles.
Follow-up: What other function feature is absent? Arrow functions also do not provide their own arguments variable; they use the enclosing scope's one.
Related
Object methods, "this"Arrow functionsforEachbind