Tutorial Playlist

JavaScript “This” Keyword and How to Implement It

Lesson 11 of 14By Taha Sufiyan

Last updated on Aug 3, 2020934
JavaScript “This” Keyword and How to Implement It

JavaScript—the most widely used web programming language—is an open-source tool designed for creating web-based applications. It is lightweight and interpreted, which makes it perform much faster than other languages. Because JavaScript is integrated with HTML, it is also easier to implement in web applications. 

In this article, we will cover all of the basics you need to know about JavaScript “this” keyword. We will also introduce the concept of reference. This article will also acquaint you with the “this” keyword on a global and local scope. 

JavaScript is essential for web development, and if you’re contemplating a career in this industry, it’s important to know this widely-used programming language. 

In our JavaScript “this” keyword guide, we will be covering the following topics:

  • What is “this” keyword in JavaScript?
  • Global scope
  • Object method

What is “This” Keyword in Javascript?

this-js

Fig: JavaScript “this” keyword

“This” keyword refers to an object that is executing the current piece of code. It references the object that is executing the current function. If the function being referenced is a regular function, “this” references the global object. If the function that is being referenced is a method in an object, “this” references the object itself.

The JavaScript “this” keyword is one of the most widely used keywords. It can seem complex at first, but once you start using “this” keyword, everything will become clear. 

JavaScript Background

Typically, when individuals show an interest in web development, they learn the basics with HTML and CSS. From there, they move on to JavaScript. These three elements together form the backbone of web development.

  • HTML is your page's structure which includes the headers, the body text, and any images you want to include. It defines the contents of a web page.
  • CSS controls how that page looks (it's what you'll use to customize fonts, background colors, and so on).
  • JavaScript is the third element. Once you've created your structure (HTML) and your aesthetic vibe (CSS), JavaScript makes your site dynamic (automatically updateable).

Full Stack Java Developer Course

The Gateway to Master Web DevelopmentExplore Course
Full Stack Java Developer Course

Global Scope

If you call a function from the global scope that includes “this” keyword, then “this” will always point to the window object. The following example can help to visualize this concept: 

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>JavaScript This Keyword</title>

  </head>

  <body>

    <script>

      var myVar = 100;

      function printMe() {

        var myVar = 200;

        alert("myVar = " + myVar); // 200

        alert("this.myVar = " + this.myVar); // 100

      }

      printMe();

    </script>

  </body>

</html>

  • We declare a variable myVar with an initial value of 100
  • After that, we define a function that sends an alert with a statement to the browser window when it is called
  • Whenever we access the value of myVar without “this” keyword, it gets the value defined locally within that function
  • On the other hand, when we try to get the value of myVar variable using the “this” keyword, it fetches the value defined outside the function (globally)

Object Method

In JavaScript, we can create objects of a function using the new keyword. Therefore, whenever we create an object of a function using the new keyword, then “this” will point to that particular object. We can take a look at this in more detail with the following example:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>JavaScript This Keyword</title>

  </head>

  <body>

    <script>

      var myVar = 100;

      function printMe() {

        this.myVar = 200;

        this.display = function () {

          var myVar = 300;

          alert("myVar = " + myVar); // 300

          alert("this.myVar = " + this.myVar); // 200

        };

      }

      var obj = new printMe();

      obj.display();

    </script>

  </body>

</html>

  • We declare a variable myVar and initialize it with a value of 100
  • Now, when we create an object ‘obj’, it will have two properties that we defined in the code: ‘myVar’ and ‘display’—note that display is a function expression in this case
  • Therefore, “this” keyword inside the display() method of the object ‘obj’ points to the value outside the scope of the display() method
  • When we call the display() method, it initially shows the alert with the local value, and then an additional alert with the global value fetched using “this” keyword

While HTML and CSS are required to code a basic web page, JavaScript is the language that will help you bring that page to life, making it more appealing to your audience. It is the key to making your website look and feel more like a full-fledged application.

Taking the time to learn JavaScript will help you immensely in the web development world and can make you a qualified candidate for an exciting role as a web developer. 

Master the complete JavaScript fundamentals, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview!

Get Ahead of the Curve and Master Javascript Today

If you're an aspiring web and mobile developer, JavaScript training will broaden your skills and career horizons exponentially. You may be wondering how you can obtain the skills necessary to master this essential web programming skill.  

Look no further! Simplilearn offers a comprehensive JavaScript Training Course, which will help you become career-ready upon completion. 

Do you have any questions for us? Please leave them in the comments section, and we'll have our experts answer them for you.

About the Author

Taha SufiyanTaha Sufiyan

Taha is a Research Analyst at Simplilearn. He is passionate about building great user interfaces and keeps himself updated on the world of Artificial Intelligence. Taha is also interested in gaming and photography.

View More
  • Disclaimer
  • PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.