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?
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).
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.
Recommended Resources
Video TutorialJava Programming: The Complete Reference You Need
- Ebook
Blockchain Career Guide: A Comprehensive Playbook To Becoming A Blockchain Developer
- Article
Introducing Simplilearn’s Full Stack Java Developer Master’s Program
- Video Tutorial
Java EE Tutorial: All You Need To Know About Java EE
- Video Tutorial
All You Need to Know to Implement JUnit Testing in Java
- Ebook
Free eBook: Salesforce Developer Salary Report
- Disclaimer
- PMP, PMI, PMBOK, CAPM, PgMP, PfMP, ACP, PBA, RMP, SP, and OPM3 are registered marks of the Project Management Institute, Inc.