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)
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.
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.
//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.
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.
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.
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.
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
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.
//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.
//output of above code(fig 1.8) would be same as fig 1.7
"Vijay is eating his lunch"