Arrow Functions & this

arrow-function-thisinterview-questionsarrow-functionsthislexical-scope

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Arrow Functions & this

this & Binding

Arrow functions have no own this; they capture the lexical this of the enclosing scope and cannot be rebound by call, apply, or bind. That makes them ideal for callbacks inside methods, but wrong for object methods and prototype methods.

An arrow function does not create its own this binding. Instead it captures this from the surrounding lexical scope at definition time, and that capture is permanent: call, apply, and bind cannot change it. The same is true for arguments — an arrow uses the enclosing scope's.

This makes arrows perfect for callbacks that need the outer this. Inside a class method or constructor, setInterval(() => this.count++) or arr.map(x => this.transform(x)) just works, with none of the old self = this or .bind(this) boilerplate.

It also makes arrows wrong in two places: as object literal methods (the arrow's this is the outer scope, not the object) and as prototype methods (every instance would share the lexical this instead of the calling instance). Use a regular function or method shorthand there so implicit binding sets this to the right object.

Arrows have no own this — they capture lexical this.

call/apply/bind cannot rebind an arrow's this.

Great for callbacks; wrong for object/prototype methods.

const obj = {
  name: "Ann",
  bad: () => this.name,        // arrow: lexical this, NOT obj
  good() { return this.name; } // method: this -> obj
};
function Timer() {
  this.count = 0;
  setInterval(() => { this.count++; }, 1000); // arrow keeps this
}
const rebound = (() => this).call({ x: 1 }); // call cannot rebind arrow

Read the implementation

Connect each part of the code to the concept before you type.

1. Arrow as a method

An arrow used as an object method takes this from the enclosing scope, not obj, so this.name is wrong here.

bad: () => this.name,        // arrow: lexical this, NOT obj

2. Regular method

A normal method gets implicit binding, so this is obj and this.name is "Ann".

good() { return this.name; } // method: this -> obj

3. Arrow callback

The arrow captures the constructor's this, so the timer updates the right object without bind.

setInterval(() => { this.count++; }, 1000); // arrow keeps this

4. call ignored

An arrow has no own this, so call/apply/bind cannot change it — the lexical this stays.

(() => this).call({ x: 1 }); // call cannot rebind arrow

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.