Post
Ask Question

Understanding the Basic Concept of the "this" Keyword in JavaScript

Introduction

 
Welcome to the "Advanced JavaScript" article series. In this article series we have covered many topics in JavaScript. You can read the complete series by navigating the following links.
This is the article where we will try to understand the "this" keyword and we will try to be a master of it. So, let's try to explore the "this" keyword.
 
I will expect that you have experience in some other programming language (like C++, C# and so on) and from there you get the basic idea of the "this" keyword. Anyway, if you don't then don't worry. The purpose of this article is to explain the "this" keyword from scratch. Let's read a few sentences in English.
 
"Sourav is writing 'this' article. 'This' is the language that I like most." So, what have we learned here? In the first sentence "this" refers to the current article and in the second sentence "this" refers to the current programming language.
 
Language developers are too wise. Ha Ha. They don't want to confuse us at all. Yes, the "this" keyword always points to the current object. So, the concept is that when we specify the "this" keyword it will always point to the current working object. Now to understand this with an example.
 
The "this" keyword within a class/object
 
In this example, we will create one class (don't be confused, if you are new to this series then please go through the class section of this series) with a name and surname property. The beauty of the class is that the argument allies and class property allies are the same and to distinguish them we have used the "this" keyword. In this scenario "this" is pointing to the class property. Have a look at the following example.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.      <title></title>  
  5. </head>  
  6. <body>  
  7.      <script>  
  8.          var person = {  
  9.             name: '',  
  10.             surname: '',  
  11.             print: function (name, surname) {  
  12.                  this.name = name;  
  13.                  this.surname = surname;  
  14.                 console.log(this.name + " " + this.surname);  
  15.             }  
  16.         }  
  17.         person.print('sourav', 'Kayal');  
  18.      </script>  
  19. </body>  
  20. </html> 
Here is the output from the code above.
 
this keyword with in class
 
The "this" keyword to point to the class property
 
Though this example is very similar to the previous one, it will help to clarify your confusion, if you have any. In this example we are setting the property value of the class and in the case of the function call we are sending another value. Have a look, when we are printing the value of a variable using the "this" keyword , it's always taking the property value that we set by default.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.      <title></title>  
  5.      <!--<script src="backbone/Jquery.js" type="text/javascript"></script>-->  
  6. </head>  
  7. <body>  
  8.      <script>  
  9.          var person = {  
  10.             name: 'Sourav',  
  11.             surname: 'Kayal',  
  12.             print: function (name, surname) {  
  13.                 console.log("Name in class:- " + this.name);  
  14.                 console.log("Name in parameter :- " + name);  
  15.             }  
  16.         }  
  17.         person.print('Ajay', 'Joshi');  
  18.      </script>  
  19. </body>  
  20. </html>  
This is the sample output.
 
this keyword withclass property
 
The "this" points to the global object (window)
 
Let's understand the concept. The "this" keyword always points to the global object, if we do not specify the full namespace. In this example, we have declared two variables with the same name. One variable is global and another is local to the function. When we call the variable using the "this" keyword it's pointing to the global one and to print the local one, the variable name is enough.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. </head>  
  5. <body>  
  6.      <script>  
  7.          var value = 100;  
  8.          var fun = function () {  
  9.              var value = 200;  
  10.             console.log("pointed by this(window object):- " + this.value);  
  11.             console.log("Local value:- " + value);  
  12.         }   
  13.         window.fun();  
  14.      </script>  
  15. </body>  
  16. </html> 
Here is a sample output of this code.  
 
this points to global object
 
Accessing local variable using the "this" keyword
 
In the example above we saw that, if we specify the "this" keyword then it points to the global object, always. Now, the question is, shall we point to the local object/variable using "this" keyword? Yes, we can. Here is an example.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. </head>  
  5. <body>  
  6.      <script>  
  7.          var name = 'Sourav';  
  8.          var surname = 'Kayal';  
  9.          function showInfo() {  
  10.             console.log(this.name + " " + this.surname);  
  11.         }  
  12.           var person = {  
  13.            name: 'Ajay',  
  14.             surname: 'Joshi',  
  15.             showInfo: function(){  
  16.                 console.log(this.name + " " + this.surname);  
  17.                 }  
  18.         }  
  19.         showInfo(); //Sourav Kayal  
  20.         person.showInfo(); //Ajay Joshi         
  21.      </script>  
  22. </body>  
  23. </html> 
The point to be noted at the time of the call to the "showInfo" function in the second case is that we are specifying the object/class name (person). And hence this object is pointing to the local resource. Here is the evidence.
 
local variable using this keyword
 

Conclusion

 
Nowadays, writing shows an article, Ha Ha, due to the preparation of another series. Anyway, I hope this article has provided a solid understanding of the "this" keyword in JavaScript. And I hope that in the future you will never be confused by the "this" keyword.
 
Finally, "this" is the explanation of the "this" keyword in "this" article. Never be confused by "this" after reading "this" article. Now, I hope "this" concept in JavaScript is clear in "this" article. "this" is the time to say goodbye.


Similar Articles