Surya JS Journey
Learn JavaScript through concepts, code, and guided practice.
A focused workspace for concept study, interactive examples, visual explanations, and challenge solving.
This Keyword
The value of `this` depends on how a function is called, not where it was written.
In JavaScript, `this` is determined by invocation context. Method calls usually bind `this` to the owning object, standalone functions often default differently depending on strict mode, and arrow functions capture `this` lexically from the surrounding scope.
Explanation
In JavaScript, `this` is determined by invocation context. Method calls usually bind `this` to the owning object, standalone functions often default differently depending on strict mode, and arrow functions capture `this` lexically from the surrounding scope.
Key Points
- `this` is set at call time for regular functions.
- Arrow functions do not create their own `this`.
- `bind`, `call`, and `apply` let you control invocation context.
Common Mistakes
- Assuming `this` always points to the object where the function was defined.
- Using arrow functions for object methods without considering lexical `this`.
- Losing `this` when passing methods as callbacks.
Practice Workspace
this-keyword.js
Edit the code, run it in the browser, and inspect the console output below. Reset restores the original snippet for this page.
Editor
8 lines
Output
0 entries
Mode
practice
Workspace Notes
Changes stay local until you run the code. Reset restores the original snippet immediately for another pass.
Editor Actions
Use the editor to explore the example, then run it to inspect the console.
Run the code to see output here.
Expected Output
SuryaContinue in Playground
Open this concept example in the shared playground to keep experimenting without leaving the broader workspace flow.
Open in PlaygroundRelated Concepts