Quiz
Warm-up from lesson 1-2: `makeCounter` returns a function that still updates `count` after `makeCounter` has returned. What is that mechanism called?
this is decided at call time
this is a special value available inside every regular function. It exists so one function can serve many objects: a greet method written once must know which of a thousand users it was called on. Getting this wrong is one of the most common JavaScript bugs in production — handlers that print undefined, methods that crash the moment they are passed around — and a guaranteed interview topic. Here's the key mental model: this is not attached to the function, it is decided fresh every time the function is called, by how it is called.
Rule 1, the method call. When you call a function through an object, obj.method(), this is the object before the dot. That's the common case: a method uses this to reach the object it was called on.
Code exercise · javascript
Run it. `user.hello()`: the object before the dot is `user`, so inside the function `this` is `user`.
Code exercise · javascript
Run it. Same function, no dot in the call, so `this` is no longer `user`, so `this.name` is `undefined`. Copying a method out of its object loses `this`.
Rules 2 and 3
Rule 2, the plain call. Call a function with no object before the dot and there is nothing sensible for this to point at. What you actually get depends on a language setting called strict mode: a stricter ruleset that code opts into by placing the string "use strict" at the top of a file or function. Module files (files that share code with import/export — Unit 8 covers them) and class bodies are in strict mode automatically, so effectively all modern code is. In strict mode a plain call gets this = undefined. Only old-style scripts without it ("sloppy mode") silently fall back to the global object. Either way it is not your object, which is why detached() broke.
Rule 3, arrow functions. Arrow functions have no this of their own. They use the this of the surrounding scope, exactly like a closure captures a variable (lesson 1-2!). That makes arrows the right choice for a callback — a function you hand to other code so it can be called later, like the function you pass to setTimeout — written inside a method: the arrow keeps the method's this instead of losing it.
Code exercise · javascript
Run it. The arrow inside `start` has no own `this`, so it looks outward and finds `start`'s `this`, which is `timer`.
The flip side: arrows make bad methods
Rule 3 cuts both ways. An arrow written directly as an object-literal method does not get the object as this, because an object literal is not a scope — the arrow reaches past it to the surrounding file's this, which is not your object. The working rule: shorthand syntax (good() { ... }) for methods, arrows for callbacks inside them.
Code exercise · javascript
Run it. `good` is a normal method, so `this` is `counter`. `bad` is an arrow: it ignores the object entirely and inherits the file's `this`, so the count comes back `undefined`.
Quiz
`const f = timer.start; f();` runs in modern strict-mode code. Inside `start`, what is `this`?