#53 Function & this Variable | JavaScript Functions & Data | A Complete JavaScript Course

in the last lecture we learned about this keyword in brief and we understood what this keyword refers to when we use it inside a method of an object so basically we learned that when we use this keyword inside a method of an object the this keyword will point to the object on which that method is called and we also learned that this keyword inside a method of an object does not point to the object inside which that method is defined it points to the object on which that method is called but what about the value of this keyword other than using it inside a method for example what will be the value of this keyword when we use it in a global context or what will be the value of this keyword when we use it inside a regular function not inside a method inside a regular function that's what we are going to learn in this lecture so remember that that when we use this keyword in a global scope it will point to the global object and in case of browser the global object is the window object so this keyword in the global scope will point to window object let's try to understand it with an example so in here let me go ahead and let me write console.log statement and here let's try to log this now here we are using this keyword in the the global context this code here it is not present inside any method or inside any code block it is present in the global scope so what will be the value of this keyword in global scope as we learned in global scope this keyword points to global object and in JavaScript when we use JavaScript in browser the global object is the window object so this keyword here will point to window object when we are using it in the global context and to prove that if if I save the changes you will notice that the window object is logged when we are logging this keyword okay so remember that when we use this keyword in global context in global scope this keyword will point to global object and in case of browser the global object is window object so it will point to this window object then when we use this keyword inside a regular function then this keyword will always point to global object that is window object but if we use strict mode in that case this keyword inside a regular function will point to undefined so its value will be undefined let's again understand it practically so let me comment this code here and let's go ahead and let's create a regular function for that I'm going to use this function keyword let's simply call it as great and inside this function I'm simply going to log this keyword okay now let's go ahead and let's call this create function and currently we are not using strict mode if I scroll up I have not used strict mode here so if I save the changes you will see that window object is logged at line number 68 so at this line inside this GRE function when we are logging this keyword it is logging window object so in case of a regular function also when we use this keyword inside a regular function at that time also this keyword points to global object that is window object but this is in non-strict mode if we use strict mode so let me go ahead and let me use strict mode here now in this case the this keyword inside a regular function will be undefined as you can see now undefined is logged so in a non-strict mode this keyword inside a regular function points to global object but in strict mode this keyword inside a regular function points to undefined that means its value is undefined but what about function expression so let's go and let's create a variable let's call it greet and to that let's assign a function using this Anonymous function syntax let me save the changes so in this case also in strict mode inside a function expression also in strict mode this keyword will point to undefined but if we don't use strict mode if I comment it here and if I save the changes in that case it will point to window object so same as regular functions so in case of regular function also this keyword points to global object in non-strict mode and it points to undefined in strict mode in the same way in function expression also this keyword points to global object in non-strict mode and in strict mode this keyword inside a function expression points to undefined its value is undefined okay now what if I create a regular function inside a method so in here inside this calculate AG method before returning a value let's say what I will do is I'll create a regular function let's simply call it as inner and in inside this also let's try to log this keyword and let me go ahead and let me comment this line okay so it is not going to execute this greed function now so inside this calculate age method we are creating this inner function inside that inner function we logging the value of this keyword now let's go ahead and let's call this inner function so what do you think will be the value of this keyword in this case let let me also go ahead and let me log the value of this keyword inside this calculate age method so we already know that in this case this here will point to the object on which we will call this calculate age method right that's what we learned in our last lecture so here I'm going to call the calculate age method on this person object if I save the changes now you will see that at this line when we are logging this keyword inside this calculate age method it is pointing to this person object here you can see the name is John birth year is 1990 and we also have this calcul function so it is this person object which is getting logged here and this keyword is logging that person object when we are using it inside this calculate age method but when this inner function is getting called this inner function is a regular function inside that when we are logging this keyword it is again logging the window object the global object and currently we are not in strict mode okay so as we learned no matter where you are calling the regular function whenever you call a regular function this function we calling it like a regular function this inner function we are not calling it on any object this is just a regular function call and for a regular function call this keyword will always point point to window object in non-strict mode that's what we learned and it will point to undefined in strict mode this inner function here it is a regular function inside that this keyword will point to window object in non-strict mode and it will point to undefined its value will be undefined in strict mode so if I save the changes you see now this line here inside this inner function this is pointing to undefined its value is undefined so always remember that regular function inside a regular function this keyword will always point to window object in non-strict mode and it will be undefined in strict mode no matter where we are calling it here we are calling it inside a method so the first impression would be that this keyword inside this function will point to that object right but that is not the case okay okay so when we use this keyword inside a regular function present inside an object method there also the this keyword inside that regular function will point to global object in non-strict mode or it will be undefined if we are using strict mode then we can also use this keyword inside an arrow function but remember that the arrow function does not get its own this keyword instead instead it uses the this keyword of its parent scope let's try to understand it practically so here if I create this greed function using Arrow function syntax and inside that when we try to log this keyword let me uncomment this and here let me remove this inner function from here okay and let's also remove this console.log statement from here so this Arrow function it does not get its own this keyword what it does is it uses the value of this keyword from its parent scope now here we are defining this Arrow function in the global scope so its parent will be Global scope and we have learned that in global scope this keyword points to window object the global object so this Arrow function inside this Arrow function also since its parent scope is global scope this keyword will point to global object if I save the changes you will see that the window object is logged here now let me comment this call here and let's create an arrow function inside this calculate age function so here I'm going to create a function called inner to that I'm going to assign a function using Arrow function syntax and inside that let's try to log this and let's go ahead and let's call this inner function okay and we need to write it before the return statement otherwise this code will never get executed because before that only we are returning so now we are using this Arrow function inside this calculate age method so what will be its outer scope the outer scope for this Arrow function is this calculate age method basically this code block and inside this code block inside this calculate age method the this keyword will point to the object on which we will call this calculate AG method right and since Arrow function does not get its own this keyword and it uses the value of this keyword of its parent scope in the parent scope in this calculate age method this keyword is going to point to the object on which we will call this calculate method so inside this Arrow function also this keyword will point to that object so here we are calling this calculate age method on this person object so inside this calculate age method this keyword will point to this person object and since we are using this Arrow function inside this calculate age method its parent scope is this method so inside this Arrow function also this keyword will point to this person object if I save the change you will see that at this line at line number 80 it is logging the person object that's because in the parent scope that means inside this calculate age method also if we log this keyword it is going to log this person object itself so if I save the changes you see both the places person object is logged so since in the parent scope this keyword points to this person object inside this Arrow function this key word will point to person object because Arrow function does not get its own this keyword so it uses the value of this keyword from its parent scope I hope this point is clear now we are going to talk about this keyword inside an arrow function in great detail in our next lecture but for now this you need to understand that the arrow function does not get its own this keyword so it uses the value of this keyword from its parent scope and finally when we use this keyword inside an event handler function the this keyword will point to the Dom object on which we are adding the event handler function so for example let's say we have a button element and we want to listen to click event on that button element for that on the button element we will use add event listener method and to that add event listener method we will also pass a call back function that will be the event handler function so in that event handler function the this keyword will point to the button object on which we are listening the event let's understand it practically for that let's go to index.html file and there after this div let's create a button element let's say click me and on this I'll add an ID let's call it example button okay let me also go and let me add some CSS for this button so let me save the changes this button has been added let's open style. CSS and there I'm going to add some CSS on this button so here we are using the ID okay let's close this all right now what we are going to do is we are going to access this button element and on that we are going to listen to cck event so for that I'm going to use document. getet element by ID method and to access this button element we are going to use its ID which is example button and on that I'm going to use add event listener method now let's move it to a separate line so that it will be more readable and now we want to listen to click event here and when this click event happens we want to execute a function okay and inside this function let's go ahead and let's try to log this just to check what is the value of this keyword inside this event handler function and again I'll comment this inner function here okay let's save the changes let's also remove this console.log statement from here save the changes now and now when we click on this button you will notice that that button element has been logged here so this keyword here inside this event handler function is pointing on this button element which this expression will return okay now what will happen if I use Arrow function syntax here instead of this function keyword let's see that so here now I'm using Arrow function syntax and now if I save the changes and when we click on this button you see now it is logging window object why because the arrow function will use the this keyword of its parent scope it does not get its own this keyword so it uses the this keyword of its parent scope now the parent scope for this Arrow function in this example would be the global scope and in global scope this keyword points to the global object which is this window object and that's why here this keyword is logging this window object but instead of using Arrow function if I use this Anonymous function syntax in this case it is going to have its own this keyword because this function it is not an arrow function so it gets its own this keyword and that this keyword will point to the Dome element on which we are listening to the event for which this function is the event handler so in this case that button element should be logged as you can see so if you remember these Five Points you will never get confused with the value of this keyword first of all in global scope this keyword points to the global object and for browsers the global object is window object in a regular function this keyword will always point to global object in non-strict mode or it will be undefined in strict mode then in a method call that means in a method which we create inside an object when we use this keyword inside a method the this keyword will point to the object on which that method is called for the arrow function Arrow function does not get its own this keyword so it uses the this keyword of its parent scope we have seen this with an example and for event handler function the this keyword will point to the Dom element on which the event handler function is attached but if we are using an arrow function Syntax for the event handler in that case again this point will be taken into account because Arrow function does not get its own this keyword so in that case also it will use the this keyword of its parent scope so if you remember these Five Points about this keyword you will never get confused with the value of this keyword and it is going to help you a lot when working with this keyword all right so this is all from this lecture in the next lecture let's try to understand the use of this keyword inside an arrow function in more detail this is all from this lecture thank you for listening and have a great day

Channel: procademy

Views: 233

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: 4GV9bYU1PuM

Length: 18min 57sec (1137 seconds)

Published: Sun Jul 14 2024