Lesson 14 of 15By Taha Sufiyan
Last updated on Aug 3, 20201339JavaScript—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:
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.
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.
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>
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>
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!
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.
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.
Java Programming: The Complete Reference You Need
Blockchain Career Guide: A Comprehensive Playbook To Becoming A Blockchain Developer
Introducing Simplilearn’s Full Stack Java Developer Master’s Program
Java EE Tutorial: All You Need To Know About Java EE
All You Need to Know to Implement JUnit Testing in Java
Free eBook: Salesforce Developer Salary Report