Academy
mediumJS ES6+#69

Arrow functions and lexical this

Prompt

Create an object with a method that uses setTimeout with an arrow function to preserve the lexical this. Log the object's name after 100ms.

Solution

const timer = {
  name: 'Timer',
  delayedHello() {
    setTimeout(() => {
      console.log(this.name)
    }, 100)
  }
}
Mentor's take

A regular function gets its this from how it's called, and setTimeout invokes its callback as a plain function — so this is undefined in strict mode (or the global object otherwise), and this.name silently logs undefined. Arrow functions don't have their own this at all: they resolve it lexically, from the enclosing scope at the point of definition, exactly like closing over a variable. Since the arrow is defined inside delayedHello — whose this is timer when called as timer.delayedHello() — the callback sees the right object. No bind, no const self = this; those are the pre-ES6 workarounds this syntax retired.

The consequence of lexical binding: an arrow's this is fixed forever — call, apply, and bind cannot rebind it. Arrows also lack their own arguments and can't be constructors. That's why they're perfect as callbacks and wrong as anything that needs a dynamic this.

Red flag: "fixing" the bug by making the method itself an arrow — delayedHello: () => { ... }. Now the method's this is the enclosing module scope, not timer, and the bug is back one level up. The rule: method shorthand for the method (needs dynamic this), arrow for the callback inside it.

Say it: "Arrow functions have no own this — they capture it lexically at definition and can never be rebound — so I use method shorthand for the method and an arrow for the callback inside it."