One of those sessions where something you thought you understood gets explained at a deeper level and suddenly makes way more sense. The this keyword especially — this is the full picture.
setTimeout Is Just a Function Too
This sounds obvious but it's worth saying clearly. setTimeout is itself a function — one that the browser gives you. Under the hood it looks something like:
function setTimeout(callback, delay) { // browser starts the timer // when delay is done, calls callback() }
The timer doesn't start on its own. You start it the moment you write:
setTimeout(myFunc, 3000);
That line is you saying — "hey browser, start a 3 second countdown, then call myFunc." You own the trigger. The browser owns the clock.
The Only Two Valid Ways to Write an Anonymous Function
There are exactly two ways to define an anonymous function and actually use it:
`const myFunc = function() { ... }
const myFunc2 = () => { ... }`
Both store the function in a variable so you can call it later. Arrow functions are anonymous by nature — they have no name of their own, they just get stored wherever you put them.
This however is invalid:
function() { ... }
A floating anonymous function with no variable to hold it — you've created something you can never call. JavaScript won't even let this through without throwing an error. It needs a home.
this Inside Objects — The Collision Problem
When you're working with this inside an object method, there's one rule that saves a lot of pain: don't nest a regular function inside another regular function and expect this to behave.
Here's why — every time you write the function keyword, JavaScript creates a brand new this context. So when you nest one inside another, the inner one creates its own this and completely shadows the outer one. Two bosses, one conflict.
`const laptop = { brand: "Apple", showBrand: function() { setTimeout(function() { console.log(this.brand); // 'this' is Window, not laptop! }, 1000); } };
laptop.showBrand(); // undefined 😭`
The outer function in showBrand correctly points this at laptop. But the inner function inside setTimeout creates its own this — and since nothing is calling it as a method, this resets to the window object. window.brand doesn't exist. undefined.
Arrow Functions Fix This — Here's Exactly Why
Arrow functions don't bring their own this. They genuinely don't have one. Instead they look outward and say "I'll borrow this from whoever is above me" — this is lexical binding.
`const laptop = { brand: "Apple", showBrand: function() { setTimeout(() => { console.log(this.brand); // Inherits 'this' from showBrand ✅ }, 1000); } };
laptop.showBrand(); // "Apple" 🎉`
The arrow function inside setTimeout has no this of its own so it looks at its parent — showBrand — which does have this pointing correctly at laptop. Problem solved, no collision.
The Full this Mental Model — All Eight Rules in One Place
These are worth locking in properly:
this is just a reference — a pointer to whatever object is currently relevant to that function. Nothing more.
Every regular function gets its own this for free the moment it's created. That's the function keyword's doing.
Arrow functions have no this — they inherit it from the scope they were written in. That's lexical scoping in action.
When you nest a regular function inside a regular function, the inner one shadows the outer this. Two function keywords, two this contexts, collision guaranteed.
When you nest an arrow function inside a regular function, the arrow says "I'm not the boss, I'll follow whoever is above me." It binds to the parent's this at the time it's created.
A regular function called without an object (just myFunc()) — this resets to window in normal mode, or undefined in strict mode.
A regular function called as a method (laptop.showBrand()) — this correctly points to laptop.
This is why inside objects, the outer method should use the function keyword (to establish the correct this context pointing to the object), and any inner functions should be arrow functions (to inherit that same context without creating a new one).
Top comments (0)