Frontend · interactive

What is this?

In JavaScript, this inside a regular function is decided at call time by how the function is called: usually the object before the dot. Pass the method somewhere else and the dot is lost.

const user = {
  name: "Ada",
  greet() { return `Hi ${this.name}`; },
};

const greet = user.greet;
greet();

→ TypeError: Cannot read properties of undefined (reading 'name')

Called as a plain function, with nothing before the dot. In strict mode and modules, this is undefined.

Call it as

Step 2 of 4 · read left to right

1
Look left of the dot
obj.fn() sets this to obj. That's the rule most of the time.
new Foo() sets this to the new object.
2
A bare call loses it
Storing or passing the method separates it from the object. Strict mode gives undefined.
Classic bug with callbacks and event handlers.
3
Arrow functions or bind
Arrows don't have their own this; they use the enclosing one. bind fixes this permanently.
Class fields with arrows: handleClick = () => …
4
Mostly avoided in modern code
React function components and closures rarely use this. You'll still meet it in classes, DOM APIs and older libraries.
call/apply set it explicitly for one call.

In production

Tools and technologies

Every JavaScript developer meets this eventually.

Not tied to one language — use these names when you search docs or design a system.