Introduction
The this keyword is a fundamental concept in JavaScript that often confuses developers due to its dynamic nature. It represents the context in which a function is executed and plays a critical role in object-oriented programming.
In this guide, we'll dive into the this keyword in JavaScript and explore how it works. We'll also look at the different ways to set the this keyword and the different use cases of the this keyword.
Suggested Tutorials 📑:
Let's get started! 🚀
What is the this keyword?
The this keyword is a special keyword in JavaScript that refers to the context in which a function is executed.
It is a reference to the object that owns the code being executed. The value of this is determined by how a function is called. It is not a variable that can be assigned a value. Instead, it is a binding that is made when a function is invoked.
1. Global Context
In the global scope, outside of any function, this refers to the global object (window in browsers, global in Node.js).
As an example:
console.log(this === window); // Output: true (in a browser)
console.log(this === global); // Output: true (in Node.js)
2. Function Context
Inside a function, the value of this depends on how the function is called. If the function is called as a method of an object, this is bound to the object the method is called on.
As an example:
const person = {
firstName: 'John',
lastName: 'Doe',
fullName() {
console.log(this.firstName + ' ' + this.lastName);
}
};
person.fullName(); // Output: John Doe
The value of this is not determined by where the function is declared, but by the object that calls it.
Suggested Tutorials 📑:
3. Method Context
When a function is called as a method of an object, its this is set to the object the method is called on.
As an example:
const person = {
firstName: 'John',
lastName: 'Doe',
fullName() {
console.log(this.firstName + ' ' + this.lastName);
}
};
person.fullName(); // Output: John Doe
4. Constructor Context
When a function is used as a constructor (with the new keyword), its this is bound to the new object being constructed.
As an example:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const person = new Person('John', 'Doe');
console.log(person.firstName); // Output: John
console.log(person.lastName); // Output: Doe
5. Arrow Function and this
Arrow functions do not have their own this. The value of this inside an arrow function is always inherited from the enclosing scope.
As an example:
const person = {
firstName: 'John',
lastName: 'Doe',
fullName() {
const nestedFunc = () => {
console.log(this.firstName + ' ' + this.lastName);
}
nestedFunc();
}
};
person.fullName(); // Output: John Doe
Suggested Tutorials 📑:
6. Explicitly Binding this
The call(), apply(), and bind() methods can be used to explicitly set the value of this.
As an example:
const person = {
firstName: 'John',
lastName: 'Doe',
fullName() {
console.log(this.firstName + ' ' + this.lastName);
}
};
const person2 = {
firstName: 'Jane',
lastName: 'Doe'
};
person.fullName.call(person2); // Output: Jane Doe
person.fullName.apply(person2); // Output: Jane Doe
person.fullName.bind(person2)(); // Output: Jane Doe
In the above example:
- The
call()method calls a function with a given this value and arguments provided individually. - The
apply()method calls a function with a given this value and arguments provided as an array. - The
bind()method creates a new function that, when called, has its this keyword set to the provided value.
Suggested Tutorials 📑:
Conclusion
The this keyword is a powerful and sometimes tricky concept in JavaScript that determines the context in which a function is executed. understanding how this works is critical to writing clean and maintainable code. I hope this guide has helped you gain a better understanding of the this keyword and its various use cases.
Thanks for reading! 🙏, Happy Coding! 😇