JavaScript

JavaScript Lesson 28: this keyword in JavaScript

In the previous knowledge bit, we have learned that how we can add a method to an object while in this knowledge bit, we are moving ahead and discussing the scope of ‘this’ keyword in JavaScript. We will also explain how we can use this keyword correctly.

The basics of this keyword in JavaScript

this’ keyword is just similar to pronoun of English language. Like we write, ‘Matt was absent from school because he was sick.’

Here we have used ‘he’ pronoun and we have not used matt name again, like this way: ‘Matt was absent from school because Matt was sick.’ In a similar manner, we use this keyword in JavaScript as a shortcut. ‘this’ keyword is a referent, it provides a reference to an object where the function is executed. Let’s take this simple example.

var sum = {

number1: 10,

number2: 20,

sumNumber: function () {

// Here we have used 'this' like we have used 'he' instead of matt in above example.

console.log(this.number1 + this.number2);

// we can also use this, but this one is little ambiguous.

console.log(sum.number1 + sum.number2);

}
}       

Here is the output of above code:

This keyword in JavaScript Example

So using sum.number1 and sum.number2 is the little bit ambiguous, it is because let suppose we have another sum global variable and if we try to access number1 and number from the sum global variable then it would lead us to error. So to tackle this problem we use this keyword, this keyword helps us to reference precisely and it make our code unambiguous. Just like in above English sentence we used ‘he’ to refer matt, here we have used this keyword to refer to that object where function exist and this keyword makes our code more clear.

‘this’ Keyword on the global scale

Keep in mind that every function have some properties in JavaScript just like an object have. So whenever we execute any function, it will get all the ‘this’ property.

The ‘this’ keyword always refers to an object and it is used to hold the value of an object. We mostly use ‘this’ keyword inside the function. But we can also use this keyword on the global scope and outside the function.

When we declare any variable and function in global scale and when we execute our code then this keyword has the properties of the global variable and global window objects. Here is the simple example where we declaring two numbers and creating a global function:

var number1 = 10,

number2 = 22;

function sumNumbers () {

// here 'this' keyword will have the value of global windows variable that is number1 and number2

//number1 and number2 defined in the global scope.

console.log (this.number1 + this.number2);

}

var sum = {

number1: 11,

number2: 10,

sumNumbers: function () {

//Here 'this' keyword will be invoked by sum object,

console.log (this.number1+ this.number2);

}

}

// it will simple invoke global sumNumber function and print 32!

sumNumbers(); // 32

// here windows represent all global object and it will print 32 too.

window.sumNumbers(); // 32

//here we used sum object to invoke sumNumbers function!

sum.sumNumbers(); // 21       

Here is the illustration of above code below:

This keyword in JavaScript Explanatory code

So the ‘this’ keyword is a little bit tricky in different situations. I illustrated this whole scenario so you can understand ‘this’ keyword with clarity. The object defines the values for ‘this’ keyword when it invokes the function.

In this knowledge bit, we have studied the scope of this keyword in JavaScript. We have learned that how we can use this keyword in our program. We have also discussed that how we can use this keyword in the global scope.

Most Popular

To Top