this in Arrow Functions

In short: an arrow function has no this of its own. Wherever you write this inside an arrow, it looks outward to the this of the scope the arrow was written in — fixed at that point, permanently. This makes arrows the natural fix for a callback that needs its enclosing method's this: a regular function callback gets its own fresh this (usually not what you want), but an arrow simply keeps using the this that was already in scope around it.

Keep this working inside forEach

A regular function passed to forEach is called as a plain function, so it gets its own this — not the enclosing method's. An arrow function in the same spot keeps the method's this:

The regular function's this is undefined (strict mode, called standalone by forEach), so this && this.title short-circuits to undefined. The arrow function never asks "what was I called with?" — it simply uses playEach's own this, which is song, so it logs "Blue Hour".

Confirm the arrow's this never changes

Because an arrow's this is fixed at the point it was written, not at the point it's called, even call, apply and bind — which exist specifically to set this — have no effect on it:

All three lines print "Blue Hour". arrow was created inside make(), where this was outer — that's locked in forever. .call(other) and .bind(other) try to supply other as this, but an arrow function never reads a this from how it's called in the first place, so there is nothing for them to override.

The trap: an arrow as an object's own method

Because an arrow's this comes from its surrounding scope, writing one directly as an object's method usually backfires — at the point the object literal is written, this isn't the object being built yet:

This logs undefined — play's this is whatever this was in the surrounding code where the object literal itself was written, never song. (The this && guard just avoids crashing if that surrounding this happens to be undefined — its value depends on where the object literal sits, which is exactly the point: it's not song.) Use a regular method (play() { ... }) for an object's own methods; save arrows for callbacks inside a method, where borrowing the method's this is exactly what you want.

Quick practice

🎯 Your turn

Explain why list.forEach(function (s) { console.log(this.title); }) inside a method loses this, while list.forEach((s) => { console.log(this.title); }) in the exact same spot does not, and why call/apply/bind cannot change an arrow function's this.

Write your explanation and submit it — there's no code to run here, just your reasoning.