A Short Guide to Understanding JavaScript’s “this” Keyword
JavaScript is a rising language in today’s era. While it is known as a scripting language to make interactive web pages, many non-browser environments such as Node.js, Apache, and Adobe Acrobat uses JavaScript. According to Stack Overflow’s 2020 Developer Survey, JavaScript has stayed as the community’s most used language for the eighth year in a row!
Although JavaScript is a fairly easy language to learn, it isn’t simple to fully understand. One concept that other developers and I have struggled with is the infamous this keyword.
Without beating the bush around, let’s get straight to what a this statement is!
Definition
According to Mozilla’s Developer Network’s web documentation, a function’s this keyword is an identifier that refers to the property of an object. In the global context of things (outside of any function), this refers to the global object. Here is an example:
//In web browsers, the global object is the window object
console.log(this === window); //truea = 37;
console.log(window.a); //37this.b = "MDN";
console.log(window.b); //"MDN"
console.log(b); //"MDN"
On the other hand, inside a function, the value of this depends on the context of where the function is called, not where the function is declared. Here is an example:
var brand = "Nissan";
var myCar = {brand: "Honda"}var getBrand = function(){
console.log(this.brand);
}myCar.getBrand = getBrand;
myCar.getBrand();
//Output: HondagetBrand();
//Output: Nissan
As you can see, even though both myCar.getBrand() and getBrand() points to the same function, getBrand, the value of this is different because of the context where the function is being called. On one hand, if the function is being called in the context of an object, in this case, the myCar object, then it will refer to the property of the object. On the other hand, if the function is called in a global context, then it will refer to the global object — window.getBrand() which calls up window.brand. So, a different context yields different result.
Local Scope Calling
When we place the this keyword, we are pointing the keyword into a local scope context. In the local scope of this, there are thee main variations:
thisused in a simple function call
The first variation is a standalone function where we call a function directly. For example:
function simpleCall(){
console.log(this);
}simpleCall();
//Output: the Window object
In this case, the value of this is not set by the call. Since the code is not running in strict mode, the value of this must always be an object so it defaults to the global object.
Meanwhile, in strict mode, the value of this remains at whatever it is set to when executing the function. If the value of this is not defined, then it remains undefined. Here is an example:
function simpleCall(){
"use strict";
console.log(this);
}simpleCall();
//Output: undefined
2. this used in an object’s method
Similar to the Honda and Nissan example above, we can store a function inside an object, which turns it into a method that can be invoked by calling the object.
When a function is called as a method of an object, its this value is set to the property of the object that is being called upon.
var message = {
content: "I love JavaScript";
showContent: function(){
console.log(this.content);
}
};message.showContent(); //Output: "I love JavaScript"
Here, because we are calling showContent() function as a method of the message object,this becomes the value of the message’s content. Thus, this.content is then equal to message.content.
3. this used in constructor functions
We can use this keyword to create a constructor function, which will make an object. Think of it as a factory to create new objects! When a function used as a contractor, the this value is bound to the newly constructed object. Here is an example of the this keyword used as a constructor function:
function Message(content){
this.content = content;
this.showContent = function(){
console.log(this.content);
};
}var message = new Message("I love JavaScript");
message.showContent();
//Output: "I love JavaScript"
In the code above, we created a constructor function called Message, which takes a content argument. Inside the constructor function, there are two this keyword: this.content and this.showContent. As mentioned above, the this keyword is used to set the value of the new object being made, message. After creating a new object using the new keyword and assigning "I love JavaScript" as the value of the content argument, we can then call the showContent() method for the message object using message.showContent(), which will print out the value of message.content.
Good Example
To illustrate the definition of the this keyword, let me show several good examples from the documentation:
Using this in function context:
var obj = {a: 'Custom'};
var a = 'Global';function whatsThis(){
return this.a;
}whatsThis(); //Output: 'Global'
whatsThis.call(obj); //Output: 'Custom'
whatsThis.apply(obj); //Output: 'Custom
Here, we declare an object called obj and a variable called a. Next, we defined a function, whatsThis(). The concept to know here is that the value of this is dependent on how the function is called.
For example, if the function is called as whatsThis(), then the output will be 'Global' as the this in the function isn’t set to any object, which defaults it to the global/window object. Next, if the function is called as whatsThis.call(obj) or whatsThis.apply(obj), then the output will be ‘Custom’ as the this in the function is set to obj.
Conclusion
So, I hope now you understand what a this keyword is! To recap, the this keyword is used to refer to the property of a certain object. Moreover, when using the this keyword inside a function, the importance of the context lies in how the function is called, not where it is declared.
