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

in the last lecture we learned how the value of this keyword is determined based on where we are using this keyword and how we are using it now in this lecture let's try to understand some of the pitfalls of this keyword when used inside a regular function and when it is used inside an arrow function in this way you will have a good understanding on when to use which function syntax when working with this keyword and when to avoid it for that here I have again created this person object where we have the name and birth year property and we have this calculate age method which is going to return the age of the user age of the person based on this birth year by subtracting it from the current year now inside this calculate age function we are using this keyword and in the last lecture we learned that when we use this keyword inside a method this keyword points to the object on which we are calling that method here we are calling this calculator age method on this person object so inside this calculate age method at this point this keyword will point to this person object so this do birth year will be equivalent to person. birth year and what is person. birth year it is 1990 so from 2024 1990 will be subtracted and based on that it is going to return the result it is going to return the age that age we are storing in this age variable let's also go ahead and and let's log that age variable in the console and inside this function just to check the value of this keyword let's also log this so let's say console.log this and we already know what the value of this keyword will be it will be this person object let's save the changes and you will see that when we are logging this keyword inside this calculate age function since we have called it on this person object inside this calculate function this variable is is pointing to this person object and this do birth here in that case will be 1990 because this is pointing to person object so this year will be person. birth year which is 1990 that will be subtracted from 2024 and the result will be 34 so we are getting the result as expected now let's do one more thing let's create another function let's call it GRE user and this function we are going to create using Arrow function syntax so here I'm going to use this syntax this Arrow function syntax this GD function let's say it is going to take the name parameter or we will not pass any parameter because we already have a name property here so we will use this name property and inside that we are simply going to log a greeting message so for that let's say console.log and let's say good morning and then we want to print the name of the person so here we will say this do name we are using the name property of this person object now we have learned that for an arrow function we don't get a this keyword of its own so this Arrow function uses the this keyword of its parent scope now one more thing I want to mention here is that this code block which you see here this code block this is not a code block actually here we are using a syntax to create an object so using these curly braces we create an object so this is a syntax this is not a code block using this curly braces we are creating an object okay so remember that this is not a code block it is a syntax which we are using for creating this person object so these two curly braces here these opening and closing curly braces this is not going to create a scope okay this code block here it is not creating any scope because this is not a code block it is a syntax which we are using for creating this person object this is very important to understand so this GRE user function which we have created using this Arrow function syntax what will be the parent scope for this Arrow function the parent scope for this Arrow function will be the global scope because we defining this person object in the global scope and in that person object we are creating this GRE user function using this Arrow function syntax so for this Arrow function also the parent scope will be the global scope so here when I go ahead and when I call this greet user function on the person object so let's say person do greet user okay this Creet user function it is also present inside this person so this Creet user is a method of this person object and when we are calling it on the person object in here we are trying to use this keyword okay now if I save the changes what it should log the expectation is it should log good morning and then John but if I save the changes you will see that it logs good morning and then nothing now why is that that's because here this keyword is pointing to Global scope and actually what I will do is instead of calling it name I'll call it first name because on the global object also we have a name property so I'll call it first name and here let's try to use first name property so I'm changing it because as I said on the global object on the window object also we have a name property so we don't want to use that that's why I'm setting it to first name now let's save the changes and you will see that now the result is good morning undefined now why is that that's because this keyword here inside this Arrow function since this Arrow function does not get its own this keyword it is pointing to the this keyword of its parent scope here for this Arrow function the parent scope is the global scope and in the global scope this keyword points to the global object that is window object so if I go ahead and if I log this keyword inside this Arrow function if I save the changes you will see that it is logging the window object so inside this Arrow function this keyword is pointing to window object okay and on the window object we do not have a name property if I expand this window object I mean not name property first name property you will not see any first name property here okay now if I scroll down there will be a name property so on the window object we also have a name property which is empty string that's why earlier when we were using name the this do name was empty string but we do not have any first name property here and since we do not have any first name property we are seeing undefined good morning undefined all right now let me show you one more thing and that is in the global scope if I create a variable called first name using V keyword not let and cost V keyword and there if I assign it with a value let's say Mark what it does is since we are using V keyword to create this variable this first name this first name will be created as a property on the global object on this window object so at this line since we have used keyword to create this variable with this variable name a property will be created on this window object okay if I save the changes now you will see the result is good morning Mark and if I expand this window object now you will see that we have a first name property assigned with this value Mark so when we create a variable using V keyword with that variable name a property gets created on the window object but let's not worry about that here I just wanted to show you this so here if I save the changes we have an unexpected result let me remove this console.log statement also from here and also from this calculate age method let's save the changes so you see here we have this error undefined because inside this Arrow function we thought of using the first name property of this person object and we wanted to access this person object using this keyword but since we are using Arrow function Arrow function does not get its own this keyword so here instead of using the object on which we are calling this GRE user function it is using the value of this keyword of its parent scope ideally if we use any other function syntax apart from Arrow function syntax since we have called this GRE user function on this person object here this keyword should point to that person object but since we are using Arrow function syntax here we will not get a this keyword for that Arrow function so it will use the this keyword of its parent scope okay now let's take another example so what we will do is inside this calculate age method let's create another method let's call it maybe GRE and let's create this function using regular function syntax so here I'm using function expression and here since I'm creating a regular function we need to create it like this and again I I need to create it before this return keyword so that this code will also get executed and let's call this GRE function here now what do we want to do inside this GRE function let's say console.log and here again I'll try to do the same thing let me copy this and let me paste it here all right let me go ahead and let me remove this create user function from here we don't need it anymore let's save the changes now here we have this error that's because what we are doing here inside this calculate function we are creating another function called greet this is a regular function we are using regular function syntax here this is not a method this is a function and how we are calling it we are calling it like a regular function we are not calling it on any object so when we are calling this calculate AG function this function will be executed we are calling ing this function on this person object so inside this function this keyword will point to that person object now inside this function we are also creating this regular function this creete function and we are calling it now we have learned that when we create a regular function in that case inside that regular function this keyword points to window object in non-strict mode and it is undefined in strict mode now currently if I scroll to the top currently we are in the strict mode that means inside this function inside this greed function which is a regular function when we are trying to use this keyword since we are in strict mode this will be undefined and on that undefined we are trying to call this first name property and that's why we have this error cannot read properties of undefined okay now let me go ahead and let me comment that use strict here let's scroll down and now this will point to the window object because this is a regular function so in a non-strict mode inside a regular function this keyword points to the window object the global object and on that global object we don't have any first name property so now if I save the changes you will see this message good morning undefined why because on the window object this keyword here inside at this regular function it is pointing to global object that is window object and on that we don't have a first name property so this expression is returning undefined and that's what you will see logged here and here we have this error because we are trying to access greet user which we have removed so let me also remove this line okay so I hope you got the point basically since this is a regular function inside this regular function even though we have created this regular function inside this calculat age method and we are calling this calculate age method on this person object so inside this calculate age method this keyword will point to person object but then in that calculate AG method when we are creating this regular function inside that function since it is a regular function this keyword will point to global object in non-strict mode or undefined in strict mode now what we want is somehow we want to make sure that this keyword here inside this regular function does not point to the global object instead it points to the object on which we are calling this calculate AG method for that what we can do is here we can go ahead and we can create a variable let's call it self and to that let's assign this because as we learned inside this calculate age method this will point to the object on which we are calling that calculate age method so at this line we are calling calculate age method on this person object so this here will point to this person object and we assigning this to this self variable and now inside this GRE function instead of using this we can use self and if I save the changes now we should have proper result so now it says good morning John another solution would be so this is solution one another solution would be let me comment this line here and instead of using a function expression we can use Arrow function syntax because we have learned that in case of Arrow function Arrow function does not get its own this keyword so it uses this keyword of its parent scope now in this case for this Arrow function the parent scope will be this method this calculate age method and in that calculate age method this keyword will point to this person object because we are calling that calculate method on that person object so here this Arrow function will use the this keyword of its parent scope of this calculate age method there that this keyword is pointing to this person object so here we can simply say this do first name and if I save the changes we should have same result good morning John because now inside this greeting function since it is an arrow function this here will point to this keyword of this calculate age method and in this calculat method this keyword will point to the object on which we are calling this calculat method meod currently we are calling it on this person object so inside this calculat method this keyword will point to that person object so this do first name here is person. first name and what is person. first name it is John so that's what is logged here all right so I hope with these examples now you fully understand when to use Arrow function when working with this keyword and when not to use Arrow function so this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 213

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

Id: 6b57_c6LECM

Length: 15min 49sec (949 seconds)

Published: Mon Jul 15 2024