One of the most challenging and frequently used concepts in JavaScript is the “this” keyword. JavaScript uses the “this” keyword differently than other languages. However, it is essential for creating more advanced JavaScript code. As a beginner, it could be somehow difficult for you to understand the use of the mentioned keyword, but no worries!

This post will explain the “this” keyword and its usage in JavaScript.

What is “this” in JavaScript?

“this” is the keyword in JavaScript that refers to an object that executes the existing block of code. It represents an object that is invoking the current function. It is used in multiple scenarios in different ways, such as:

• • In method
  • In event handling
  • In functions

Let’s check out each of the mentioned uses one by one!

How to Use “this” in JavaScript Methods?

“this” is used in JavaScript methods as an implicit binding. When the function is called with the help of an object and a dot, it is considered implicit binding, and “this” points out the object during the function call.

Example

First, we will create an object with some properties and a method and then use the “this” keyword to get the values of the object’s properties:

 
Next, call the “info()” method along with object name:

 
It can be seen that the specified property values of the current object are successfully displayed:

If you want to use “this” in event handling, follow the below section.

How to Use “this” in JavaScript Event Handling?

In this example, check out the use of the “this” keyword in event handling. For this, consider an example in which we will hide our button with a single click. To do so, create a button and attach an “onclick()” event with it to access the style.display property with the “this” keyword that will hide the button when clicked:

 
Output

If you are confused about the use of the “this” keyword in user-defined functions in JavaScript, follow the given section.

How to Use “this” in JavaScript Functions?

While using “this” in functions, there are three types of bindings in JavaScript, including:

• • Default binding
  • Implicit binding
  • Explicit binding

Let’s understand them individually!

Example 1: Use of this keyword in Default Binding

In default binding, the “this” keyword acts as a global object. It is mostly used in standalone functions.

Let’s understand the stated concept with an example.

First, we will create a variable “x” and assign it the value “15”:

 
Then, define a function named “functionDB()” and its function definition, create a variable with the same name “x” and assign it a value “5”, then, print its value using the “console.log()” method with “this” keyword:

 
Lastly, call the “functionDB()” function:

 
Due to the use of the “this” keyword, the output displays the value of “x” as “15” because it acts as a global object and the process is called “Dynamic Binding”:

Example 2: Use of this keyword in Implicit Binding

When the function is called by an object or a dot symbol, “this” keyword acts as an implicit binding. It points out the object during the function call.

In this example, we will define a function “info()” and use the “this” keyword in the function definition:

 
Then, create an object named “personInfo” with defined properties:

 
Now, call the function along object:

 
Output

Example 3: Use of this keyword in Explicit Binding

Explicit binding is also called “hard binding” because the function is forcefully called to utilize a particular object for “this” binding, without putting a property function reference on the object. For this purpose, call(), apply() and bind() methods can be used.

We will now utilize the same function named “info()” defined in the previous example. Then, create an object named “personInfo” with the following values:

 
For invoking the function named “info()”, we will use the “call()” method and pass the created object it to as an argument:

 
As the info() is not part of the object, we still have explicitly accessed it:

For calling a function explicitly, you can also use the apply() and bind() methods. The apply() method is identical to the call() method, while the bind() method creates a new function with the same body and scope that behaves in the same way as the original function. The bind() method can be utilized to return a function that you can use later.

For calling info() with the apply() method, use the following statement:

 
It gives the same output as the call() method gives:

For calling “info()” with the “bind()” method, utilize the given statement:

 
Output

We have compiled all the essential information related to the “this” keyword.

Conclusion

“this” is the keyword in JavaScript that refers to an object that executes the existing block of code. It represents the object that is invoking the current function. It is used in multiple scenarios in different ways, including methods, event handling, and functions. In this post, we have explained the “this” keyword in JavaScript.