JavaScript this Keyword

in this lecture we're going to have a closer look at this keyword in JavaScript this is one of those features that confuses a lot of developers but honestly I think it's because of the poor teaching materials out there because I personally was confused about that this keyword for a long time so in this lecture I'm gonna make it super simple for you so we can explain it your seven-year-old brother so what is this this references the object that is executing the current function here I'm gonna give you a very simple rule of thumb if that function is part of an object we call the function and method right so if that function is a method in an object this references that object itself otherwise if that function is a regular function which means it's not part of an object this reference is the global object which is the window object in browsers and global in node let's take a look at a few examples so I'm gonna start by creating a video object in this object we're gonna have a title property and a play method let's log this here and finally call video play save the changes so we get our video object on the console so in this example because play is a method in the video object this references this object itself by the same token we can add a method later in this object and we'll get the same result for example we can add a stop method here set it to a function and here we can do console that log of this if we call the stop method once again we're going to see the video object on the console so save the changes and here is our video object because again stop is a method in the video object so that's an example are the first rule now let's take a look at an example of the second row a regular function so let's delete this and instead add a function called play video if you log this on the console we're going to see the global object which is window in browsers and global in node so let's call this function play video and save the changes so we get the window object here now what if this is a constructor function we call the constructor functions using the new operator so let's rename play video to video with a capital V that's the convention for constructor functions now here we're going to pass a title property and set this the title to title now we can use this constructor function to create a new video object so we use the new operator save the changes oops I forgot to pass a title here that's a title so what do we get here instead of the window object we get a new object and note that this object is not this video object here it's completely separate to demonstrate this I'm gonna change this argument to B so instead of the window object we get this video object because earlier in the course I told you that when you use the new operator this new operator creates a new empty object like this and sets this in this constructor function to point to the same T object so here on line 12 we add the title property so this new object so let's recap when dealing with a regular function this by default references the global object but if you call a function using the new operator which is the case for constructor functions this will reference a new empty object now the last example I'm going to clean up this code let's add another property in this object tags we set it to an array of three strings now let's rename the play method to show tags so here we can use this to get the current object and then get the tags property because this is an array we can call the for each method and here we need to pass a callback function so function in each iteration this function will get a tag and then we can display the tag on the console so consult the log of tag finally let's call video does show tags save the changes so we get ABC beautiful but what if we want to display the title of the video next to each tag well we can add this the title here save the changes we got undefined what's going on here well let's remove the title property and see what this is referencing save the changes it's referencing the window object but aren't we inside a video object here shouldn't this reference the video object no because here we are inside this callback function this function is just a regular function it's not a method in the video object the only method we have here is show tags so because this is a regular function this references the global object so it's the global object that is executing this anonymous callback function but how can we solve this problem and display the title of the video next to each tag well we have a few different solutions for this in this particular case the for each method has two parameters the first parameter is our callback function the second parameter is this arc so we can pass an object here and this will reference that object for example here I can pass a new object for the first name set tomash now when the same two changes you can see this is referencing this new object now in this example we all really want this object we want our video object so we can pass this here because at this point we are in the show tags method so this reference the current object so here we are not inside of a callback function we're still in the execution context of the show tags method so now if we save the changes next to each tag we can see our video object with this title property so we can add the title property here and with this we see the title of the video next to each tag beautiful but not all methods in JavaScript give you the ability to pass the this argument so we have a few different solutions for that and that's the topic for the next lecture hi guys thank you for watching my javascript tutorial this tutorial is part of my JavaScript course where you learn all the essential JavaScript features that every web and mobile application developer must know if you're an absolute beginner or have some experience in JavaScript and are looking for a fun and in-depth course that teaches you the fundamentals of JavaScript this course is for you this course is also packed with tons of exercises that help you master what you learned in the course in fact many of these exercises are questions that come up in technical programming interviews so if you're pursuing a job as a front-end or a back-end developer or if you simply want to have a more in-depth understanding of JavaScript I highly encourage you to enroll in the course for a limited time you can get this course with a discount using the link in the video description click the link to find out more about the course and enroll

Channel: Programming with Mosh

Views: 237,160

Rating: 4.8640037 out of 5

Keywords: Javascript, web development, web developer, front end, front-end, back-end, back end, mobile development, mobile developer, es6, learn javascript, javascript programming, programming, this, object, programming with mosh, code with mosh, mosh hamedani

Id: gvicrj31JOM

Length: 8min 20sec (500 seconds)

Published: Tue May 15 2018