In this post, you will learn about "this" keyword in JavaScript and it's usage.
Precap
What is this keyword in JavaScript?
What is the value of this in JavaScript?
What is the “this” keyword in JavaScript?
JavaScript "this" keyword is a reference to an object that belongs to. The "this" keyword returns value when the function or method is called (in which this is specified).
In other words, “this” is a reference to objects and values.
Example
In the following example, the employee object has four properties: id, name, designation and salary, and emp_data method.
<!DOCTYPE html> <html> <head> <title>this keyword example</title> </head> <body> <h1>Employee Details:</h1> <h3 id="emp"></h3> <script> let employee={ id:123456, name:"divan boze", designation:"Manager", salary:50000, emp_data:function () { return this.id+"<br>"+this.name+"<br>"+this.designation+"<br>"+this.salary+"<br>"; } }; //display data on screen document.getElementById("emp").innerHTML=employee.emp_data(); </script> </body> </html>
In emp_data() method all the object property returns using this keyword.
When emp_data() method called employee id, name, designation, and salary values are displayed.
Output:-
 |
| this keyword reference to the employee object |
What is the value of “this” in JavaScript?
In non-strict mode “this” keyword points to a reference object property or function or global variable value.
In strict mode “this” keyword can be any value.
What is the use of “this” keyword?
In JavaScript, this keyword is mostly used in global or function contexts.
Using “this” in a global context
When “this” is used in a global context it is refer to a global object which is a global object on the web browser.
Example:-
For example “this” is assigned to variable ‘a’ and it refers to the window object.
let a=this; document.write(a); //In output [object window]
Example:-
For example, this object property is assigned to a global object (window object).
this.j=700; console.log(window.j);//output in console is 700.
when you assign a property to this object, JavaScript will assign it to a global object because this is a reference to a window object.
Check for it
console.log(this===window);
In the console window, it evaluated true.
Using “this” in the function
When “this” is used in a function it references to a global object.
Example:-
This is a simple function that returns this. When a function is called, [object window] displays in the console message.
//function context function demo() { return this; } console.log(demo()); //Output in console window:-[object Window]
“this” in strict mode
When a function is defined in ‘strict mode’ “this” is “undefined”.
You can enable “strict mode” by writing “use strict”; at the top of the JavaScript file or after <script> element in html file.
If you want to specify “strict mode” to a specific function only then write “use strict”; in the first line of a function body.
Example
//function context in strict mode function demo() { "use strict"; return this; } console.log(demo());//output:- undefined
Using “this” in the method
When “this” is used in the method of object it refers to that object. As we have seen in an earlier example.
Note: In the object, the function becomes the method that is used to get the value of the object property.
Let’s see another example
Example
For example, two objects are defined: flower1 and flower2. Both have the same properties name and color with different values. Now both use the same method info. The “this” keyword is used to reference to a particular object.
<!DOCTYPE html> <html> <head> <title>this in method</title> </head> <body> <h2> select your flowers:</h2> <p id="flw"></p> <p id="flw1"></p> <script> //this in method const flower1={ name:"rose", color:"white", info:function(){ return this.color+" "+this.name; }, }; const flower2={ name:"tulip", color:"red", info:function(){ return this.color+" "+this.name; }, }; document.getElementById("flw").innerHTML=flower1.info(); document.getElementById("flw1").innerHTML=flower2.info(); </script> </body> </html>
Output:-
 |
| this keyword in the object method |
When the method is called with its objects the information is displayed correctly in the output.
“this” differentiate both objects' properties values.
How to access “this” in JavaScript?
The “this” is a keyword, not a variable. As we discussed above “this” keyword is used to reference to object, function, and method. It is not a variable but it references the value of a variable.
The “this” keyword is used to access the value of object property, variable value, and function.
Example
For example two variables with the same name ‘city’ is declared, one is outside the function and the second is inside the function. Both variables have different values ‘newyork' and ‘washington’ respectively.
//access global variable var city="newyork"; function findcity() { var city="washington"; document.write("city inside function:-",city,"<br>"); document.write("city outside function:-",city); } findcity();
When variable accessed without “this” keyword both variable values are consider as “washington”.
See in output
 |
| Accessing global variable without this keyword |
//access global variable using this var city="newyork"; function findcity() { var city="washington"; document.write("city inside function:-",city,"<br>"); document.write("city outside function:-",this.city); } findcity();
When one variable accessed with “this” keyword two different values displayed. Because “this” keyword reference to global variable that is defined outside function.
In example to access and get value of variable, which declared outside the function this keyword is used.
Now, in output both variable values are displayed.
 |
| Accessing global variable using this keyword |
Summary
This post covered basic knowledge about “this” keyword. It usage in function, object and variable in strict mode and non-strict mode.
There are more for “this” keyword that we will discuss later.
0 Comments