“THIS” in JavaScript. — Part I

Imagine you are in the school. One day your school principal comes to you and introduces you to your new classroom.

Principal: This is your new classroom and you, as students have to take responsibility for your classroom. You will be representing your class. It is your responsibility to take care of the classroom and its materials. All desks, boards, chairs, chalks, and tables will be your responsibility.

Students: Are we also get the responsibility of other classrooms?

Principal: No, ‘THIS’ is the only classroom that you are responsible for!

Students: okay. Does that mean can we can use other classrooms materials?

Principal: No, You can only use the material and resources available to your classroom. (And principle leaves)

Now, come back!, you read the conversation between Principal and Student. The reason behind giving this example is that your classroom is like a class in javascript(kind of), where you are the part of, and you are the one as a student which is accessible in the entire class, as same as object in javascript.

Lets assume, Your classroom is a class in javascript and students are like an object in javascript. So, let’s understand, what is an object in javascript?

OBJECT in JavaScript.]

We can simply define object in following way,

• It is a variable
• It has properties and methods(functions).
• It may or may not have key-value pairs.
• It’s values can be accessible by keys.

Lets define an Object with name student and give it some properties.

fig 1.1

Here, we defined an object with a variable named ‘student’ and which has properties like firstName, lastName, age, and standard. Now this object has all the functionalities that we wish for as programmers. For example, it is iterable, it is accessible by key names, and much more.

fig 1.2

//you can use console.log in code.
console.log(student.firstName) --> "Vijay"
console.log(student.age) --> 18

In the above example, firstName, lastName, age, etc. can be said as a property of an object Student. In a similar way, it can also have a function or method. Let’s see, how we define methods/functions in an object.

fig 1.3

Here, we have defined a function inside an object, which is canEat(), here question is, can we access or call that function? Yes. Let’s see. It is as same as how we have done above.

fig 1.4

As we called student.canEat(), we see function assigned to canEat is been called, and it consoled out “ He is eating his lunch”. This is how the function are been created inside the object. We can define a function inside an object in another way also.

Another way to define function inside the object.

Now, we come to the point where we can understand the use of the ‘this’ keyword inside of an object.

So now, let’s consider the following snippet (fig 1.5), and we will see, how we should do that is our object.

fig 1.5

Here, we defined the variable firstName and assigned the string “Vijay” to it. Now, we pass this variable inside the function and console log the sentence. which output will look like this:

"Vijay eating his lunch"

Now, we have to do this with our object, when we canEat() method and it should give us a similar output. so, let’s try to get this done

Fig no. 1.6

If we do code like above(fig no 1.6) and directly call the function student.canEat() then we will get error.

console.log(firstName + " is eating his lunch");
                    ^
ReferenceError: firstName is not defined

Here, we can we will get an error, but you can see, we have used firstName, but it is showing that firstName is not defined. Why is it so? It is because in the object we have to access its properties or function using ‘this’ keyword. So, if we want the above code to work, we have to change in function canEat(), i.e. to change firstName to this.firstName.

fig 1.7

//output of above code(fig 1.7)  would be
"Vijay is eating his lunch"

In the above figure(fig 1.7), “this ”refers to the object name student. So, “this” is basically, object student only. So, if we change this to ‘student’, it will not affect on output of the code.

fig 1.8

//output of above code(fig 1.8) would be same as fig 1.7
"Vijay is eating his lunch"

Now, let’s get back to the example that we were discussing, Principle and student’s conversation,i.e. classroom and student’s example. As we said above, student inside the classroom is similar like object in javascript. And we have seen, we can see some of the properties of the student itself. And how, this keyword helps us to get his properties inside his functionality. But this is not yet done!. We can see how students are accessible in classrooms, but classrooms have their things to do, which is similar to javascript classes. A combination of students and some material like desks, boards, and tables make a classroom, similarly, javascript classes are also being created with objects and their functionalities. Not only classes have objects and functionalities, but it has lot more things. We will see those, in the next part of this blog. i.e. “THIS” in JavaScript — Part II.