Understanding "this"

keyword in
JavaScript

Vladyslav Demirov

VLADYSLAV DEMIROV 1
🤔 Understanding "this":

In JavaScript, "this" refers to the current

execution context, and its value is
determined by how a function is called.
Let's explore a few scenarios with
examples:

1. Global Context:

In the global context, "this" refers to the

global object (e.g., Window in a
browser).

VLADYSLAV DEMIROV 2
2. Function Context:

When a function is called in the global

scope, "this" still refers to the global
object.

VLADYSLAV DEMIROV 3
3. Object Method:

Inside an object method, "this" refers to

the object that owns the method.

4. Event Handlers:

In event handlers, "this" typically refers

to the DOM element that triggered the
event.
VLADYSLAV DEMIROV 4
 5. Arrow Functions:

Arrow functions do not have their

own "this" context, they inherit it
from the surrounding scope.

VLADYSLAV DEMIROV 5
🚀 Tips for Navigating "this":

• Explicit Binding: Use methods like call,

apply, or bind to explicitly set the
value of "this."

• Constructor Functions: "this" in

constructor functions refers to the
instance being created.

• Arrow Functions: Be mindful of their

behavior regarding "this" in different
contexts.

VLADYSLAV DEMIROV 6
 HAPPY CODING!

VLADYSLAV DEMIROV 7