Lexical vs dynamic this, arrows revisited
See how dynamic this depends on call-site, and how arrow functions capture lexical this; use tiny, clear examples.
Lexical vs dynamic this, arrows revisited is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 3 lessons in total.
Big picture
Goal: Know when this points where.
- Dynamic this: decided by call-site
- Arrow this: captured lexically
- Common gotcha: method extraction loses this
- Use arrows to keep this inside callbacks
Dynamic this demo
Dynamic this: calling as obj.method() sets this = obj; extracting the function loses the object.
// Dynamic this depends on HOW we call the function
const person = {
name: "Ayla",
say: function () {
return "Hi " + this.name;
}
};
console.log("method call:", person.say()); // "Hi Ayla"
// Extract then call: this is lost
const talk = person.say;
console.log("extracted call:", talk()); // likely "Hi undefined" in strict mode -> this is undefined
Arrow = lexical this
An arrow takes this from the surrounding function/object scope when created; it does not change at call time.
// Arrow functions capture this from where they are created
const box = {
label: "blue",
showLater: function () {
// Arrow keeps this === box
const fn = () => "box:" + this.label;
return fn();
}
};
console.log("arrow captured this:", box.showLater()); // "box:blue"
Callbacks: keep this with arrows
In callbacks, a normal function often loses this; an arrow keeps the outer this intact.
// Using a normal function in a callback can lose this
const widget = {
id: 7,
normal: function () {
setTimeout(function () {
// here this is not widget in many environments
console.log("normal cb this.id:", this && this.id);
}, 0);
},
arrow: function () {
setTimeout(() => {
// arrow keeps lexical this from arrow()
console.log("arrow cb this.id:", this.id);
}, 0);
}
};
widget.normal();
widget.arrow();
Simple fix for extraction
If a method is extracted, wrap a small arrow that closes over the object, or bind it (next lesson). Keep it simple for beginners.
// If you must extract, wrap with an arrow capturing the object
const account = {
owner: "Mila",
label: function () { return "Owner:" + this.owner; }
};
// Lost this:
const lost = account.label;
console.log("lost:", lost()); // "Owner:undefined" (this missing)
// Fixed: create an arrow that closes over account
const safe = () => account.label();
console.log("fixed via arrow wrapper:", safe());
Good habits
Tips:
- Methods: call with obj.method() so this is the object.
- Callbacks: prefer arrows to keep lexical this.
- Extracted methods lose this; wrap with an arrow or bind.
Arrow this quiz
Quick check: Arrow this behavior.
Recap
Recap: this is dynamic for normal functions (set by call-site) and lexical for arrows (captured where created). Use arrows in callbacks and wrap extracted methods to keep behavior simple.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “Lexical vs dynamic this, arrows revisited” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “Lexical vs dynamic this, arrows revisited”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 3 lessons in total.
What will I learn in “Lexical vs dynamic this, arrows revisited”?
See how dynamic this depends on call-site, and how arrow functions capture lexical this; use tiny, clear examples. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.
How long does the “Lexical vs dynamic this, arrows revisited” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Lexical vs dynamic this, arrows revisited
- Method extraction gotchas, partial application
- Functional alternatives — pass context, closures, tiny helpers