JavaScript beginners often get confused by the this keyword in JavaScript. Why? Because its behavior changes depending on where and how you use it. Don’t worry – by the end of this article, you’ll understand this clearly, know its scope in different contexts, and see real examples that make it easy to grasp.
What is the “this” Keyword in JavaScript?
In simple words, this is a reference to the object that is executing the current function. Think of it as a pointer that tells JavaScript, “Hey, who owns this code right now?”
Many beginners make the mistake of thinking this always points to the object it’s written in. But in JavaScript, context matters more than location. That’s why understanding this is crucial for writing clean and bug-free code.
How “this” Works in Different Contexts
Let’s break down this in JavaScript step by step, with examples.
1- Global Context
In the global scope, this behaves differently depending on whether you’re in strict mode or not.
console.log(this); // In browser: window object, in Node.js: global object
- Without strict mode: this points to the global object (window in browsers).
- With strict mode (‘use strict’;): this becomes undefined.
'use strict';
console.log(this); // undefined
2. Function Context
Inside a regular function, this depends on how the function is called.
function show() {
console.log(this);
}
show(); // In strict mode: undefined, else: global object
Note – This is why many developers face bugs when using this in standalone functions.
3. Object Methods
When a function is called as a method of an object, this points to that object.
const person = {
name: 'Ali',
greet: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet(); // Hello, my name is Ali
Here, this clearly refers to the person object. That’s the magic of object context.
4. Class Methods
In ES6 classes, this behaves similarly to object methods, referring to the instance of the class.
class User {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`Hi, I am ${this.name}`);
}
}
const user1 = new User('Sara');
user1.sayHi(); // Hi, I am Sara
Arrow Functions vs Regular Functions
Arrow functions treat this differently. Unlike regular functions, they don’t have their own this. Instead, they inherit it from the parent scope.
const obj = {
value: 100,
regular: function() {
console.log(this.value); // 100
},
arrow: () => {
console.log(this.value); // undefined, because arrow function doesn't bind 'this'
}
};
obj.regular();
obj.arrow();
Key takeaway – Use arrow functions carefully when you need this.
Common Mistakes with “this” Keyword –
Beginners often make these mistakes –
1- Losing context in callbacks
setTimeout(function() {
console.log(this); // In strict mode: undefined
}, 1000);
Fix – Use arrow functions or bind().
setTimeout(() => {
console.log(this); // inherits from parent scope
}, 1000);
- Using this outside objects or classes – leads to unexpected results.
- Confusion with global object in strict mode.
Practical Examples and Real Use Cases of this
1- DOM Event Handlers
const button = document.querySelector('button');
button.addEventListener('click', function() {
console.log(this); // the button element
});
- this inside the event handler refers to the element that triggered the event.
- Using an arrow function here would break that behavior:
button.addEventListener('click', () => {
console.log(this); // window/global object, not the button
});
2. Object-Oriented JavaScript
When working with classes or objects, this allows methods to access instance properties.
class Car {
constructor(model) {
this.model = model;
}
showModel() {
console.log(`Car model is ${this.model}`);
}
}
const car1 = new Car('Toyota');
car1.showModel(); // Car model is Toyota
3. Using this in Callbacks
const user = {
name: 'Ali',
hobbies: ['Reading', 'Coding'],
printHobbies: function() {
this.hobbies.forEach(hobby => {
console.log(`${this.name} likes ${hobby}`);
});
}
};
user.printHobbies();
Why it works: Arrow function inside forEach inherits this from printHobbies() method.
Tips for Remembering this in JavaScript
- Ask yourself: Who is calling the function? That object is this.
- Use arrow functions when you want this to inherit from parent scope.
- Use bind, call, or apply to explicitly set this.
- Practice with small examples – real coding experience is the fastest way to master this.
Bottom Line-
The this keyword in JavaScript can be tricky at first, but once you understand the context and scope, it becomes a powerful tool. Remember:
- Global context → global object (or undefined in strict mode)
- Object methods → object itself
- Class methods → instance of the class
- Arrow functions → inherit this from parent scope
By experimenting with examples in this article, you’ll soon master this in JS. Keep practicing, and you’ll stop second-guessing it in your code.
Read Also –
