Understanding this in JavaScript

1What Does this Mean in JavaScript?

In JavaScript, this is a special keyword whose value is determined at call time — by how a function is invoked, not by where it was defined. That single fact explains almost every confusing case. The same function can have a different this depending on whether you call it as a method, plainly, with new, or with an explicit binding.

Once you accept that this is about the call, not the definition, the rest is a small set of rules. There are four binding patterns, and every situation falls into one of them. Learning to spot which pattern applies is the whole skill.

2Rule 1: Method Calls

When you call a function as a method — with an object before the dot — this refers to that object. This is the most intuitive case and the one people rely on when writing classes and object methods. The object to the left of the dot at the moment of the call wins.

• const user = { name: 'Ada', greet() { return 'Hi ' + this.name } }
• user.greet() # this is user, returns 'Hi Ada'
• const other = { name: 'Grace', greet: user.greet }
• other.greet() # this is other, returns 'Hi Grace'

3Rule 2: Plain Function Calls

When you call a function on its own, with nothing before it, there is no object to bind to. In strict mode — which modules and classes use by default — this is undefined. In old non-strict code it falls back to the global object, which is a frequent source of silent bugs.

This is exactly what happens when a method gets detached and called as a standalone function, such as when you pass it to setTimeout. The dot is gone, so the method binding is gone with it, and this is no longer the object you expected.

4Rule 3: Arrow Functions Inherit this

Arrow functions break the pattern deliberately. They have no this of their own, so they use the this of the scope where they were defined. This lexical behaviour is why arrows are perfect for callbacks inside methods — the callback keeps pointing at the same object as the method around it.

This is the modern replacement for the old const self = this trick. Instead of stashing a reference, you write the callback as an arrow and this simply flows through from the enclosing method.

• setInterval(() => this.tick(), 1000) # arrow keeps the method's this
• arr.map(x => this.transform(x)) # this stays the enclosing object

5Rule 4: call, apply, and bind

Sometimes you want to set this manually. Three methods let you do that. call and apply invoke the function immediately with a this you choose — call takes arguments individually, apply takes them as an array. bind returns a new function with this permanently fixed, which you call later.

• greet.call(user, 'hello') # runs now, this is user, args listed
• greet.apply(user, ['hello']) # runs now, args as an array
• const bound = greet.bind(user) # returns a new function, this fixed to user
• button.addEventListener('click', handler.bind(this)) # keep this in a callback

6this With the new Keyword

There is a fifth situation worth naming: calling a function with new. When you invoke a constructor function or a class with new, JavaScript creates a fresh object and sets this to point at it inside the function. This is how instances get their own properties.

This rule quietly underlies every class you write. Inside a constructor, this is the object being built, which is why assigning this.name gives each instance its own name. Forgetting new means this is not the new object, so the assignments go somewhere unexpected.

• class User { constructor(name) { this.name = name } }
• const u = new User('Ada') # this inside the constructor is the new object
• u.name # 'Ada', stored on the instance

7Common Mistakes to Avoid

Nearly all this confusion comes from a few recurring situations. Recognising them makes the fix obvious.

• Passing a method as a callback and losing this — bind it or wrap it in an arrow.
• Using a regular function as an array-method callback inside a method and finding this undefined.
• Defining an object method as an arrow, so this points at the outer scope instead of the object.
• Assuming this is set by where the function is written rather than how it is called.
• Forgetting that strict mode makes a plain call's this undefined rather than the global object.

8Key Takeaways

The value of this always comes down to the call, and to four rules.

• this is determined by how a function is called, not where it is defined.
• Method calls set this to the object before the dot.
• Plain calls give undefined in strict mode; arrows inherit this from their scope.
• call and apply set this and run immediately; bind returns a function with this fixed.
• Losing this in callbacks is the most common bug — bind or use an arrow to fix it.

9Frequently Asked Questions

Q: Why is this undefined in my method callback? A: When a method is passed as a callback, it is later invoked as a plain function, so it loses the object binding. In strict mode that makes this undefined. Wrap the callback in an arrow function or use bind to preserve this.

Q: What is the difference between call and apply? A: Both invoke a function immediately with a this you specify. call takes the arguments listed one by one, while apply takes them as a single array. Otherwise they behave identically.

Q: Do arrow functions have their own this? A: No. Arrow functions have no this of their own and instead use the this of the scope where they were defined. This is what makes them reliable for callbacks inside methods.

Q: Does this work the same inside a class? A: Class methods follow the same rules. Called on an instance, this is the instance; passed as a callback, this can be lost. Binding methods in the constructor or using class fields with arrows are common ways to keep this stable.