JavaScript "this" Keyword Explained

hey guys how you going my name is dom and today i'm going to be explaining what the this keyword means in javascript okay so uh it's actually a lot easier than what most people might think and all it is is it simply just refers to an object so when you type out this you are simply just referring to an object now this object is going to change depending on the context in what you are doing for example we can see here i've listed three main things you might be doing the first one is adding events to html elements using things like add event listener or your on click and things like that next we've got using the bind function and lastly we've got arrow functions so all of these three things right here behave differently when it comes to the this keyword so i'm going to be going over all of these three in today's video and then hopefully you should have a better understanding of what it actually means so let's go inside the text editor right inside here and this is simply just the html for the page which you just saw okay so inside the javascript the first thing i'm going to be doing is i'm going to be defining a new function called decode right here and this function is simply going to console.log the value of the this keyword and then we're going to call decode right down here if i save this and then go back inside the browser we can see upon refreshing we get the window object right inside here so in this context right here when i call you know a function in its simplest form just like this the this keyword refers to the global window object so now we can see we have all of these properties right here if i was to make a new variable we can say for example color is equal to blue then i just hit enter and then i call the decode function again we can see now we have the color property set right down here with a value of blue so that is your simplest form of the this keyword when you are calling it simply just like this now let's see what happens when i add an event listener to this title right up here so basically we're going to make it so when you click on this title it is going to log out once again the value of this so back up here we're going to get a reference to the title we're going to say const my title is equal to document.getelementbyid then pass through here my title and now we can just go down here and we can say my title dot add event listener let's listen for the click event right inside here and then we're going to specify this function and this function is going to simply console.log once again the value of the this keyword so now if i save this and go back inside the browser we can see upon clicking on the title this now refers to the actual element itself so basically if i go back inside here we can see this right here refers to simply just this right here so obviously we can see upon changing the context of what we are doing you know it's the exact same code right but in this case right here this now refers to the title so it depends on what you are doing now we can also go inside here and we can specify the actual decode function instead so without calling it like this so just specifying it as a reference simply just like this now if i save this it's going to do the exact same thing so if i go back inside here refresh and click on the title again we get the exact same result so it doesn't matter that this code up here below or sorry this code up here exists up here and not down here the this keyword still refers to the title itself so that is your second example of you know what you might be doing to use the uh this keyword so now i want to have a chat about the bind function so i've got a whole video dedicated to bind if you want to check that one out otherwise i'm going to go over it briefly right now so the bind function allows you to change the value of the this keyword so for sorry yeah that's fine so for example let's go inside here we're going to say decode just like this then we're going to say dot bind okay and now we're going to pass through here into this bind function an object so we're going to say for example name is equal to dom and age is equal to 50 years old so now basically this is just going to you know specify essentially the exact same function right up here but it's going to change what this means and this is now going to refer to this object which we just passed in so now saving this right here going back inside the browser refresh click on the title now we can see this means this object right there so that is what the bind function is doing it is simply just essentially forcefully changing the value of the this keyword and lastly we have arrow functions so going back inside here basically arrow functions uh ignore the concepts of what we just saw so when it comes to arrow functions this keyword is always going to refer to the surrounding environment of the code basically so if we go back inside here we're going to essentially take the same example from earlier so we're going to specify this function right here and console.log and then say this so we're going to take this example right here and convert it into an arrow function so now we can get rid of this right here then do equals greater than just like this giving us an arrow function right inside here you may have seen them before so now with arrow functions this does not refer to the title right here let's save this go back inside the browser refresh click on the title we can see it equals window so i think the easiest way to think about this is basically if you go back inside here whatever this refers to outside of where you are calling the arrow function that is what this will mean inside there okay if i console.log this just like that save this go back inside here obviously we get window immediately from that console log if i click on it we of course still get window so basically whatever the surrounding this means when you specify an arrow function that is what this is going to mean inside the function itself so basically you are ignoring the whole concept of changing the value of this okay so just keep that in mind when using arrow functions and that is basically it so like i said if you want to see more info on what the bind function is and also what this keyword means you can check out my video dedicated to bind but there you go hope today's video helped you guys out if it did leave a like and subscribe thanks for watching guys and i'll see you in the next video

Channel: dcode

Views: 10,407

Keywords: javascript tutorial, javascript events, javascript this keyword, javascript this, js tutorial, javascript bind function, javascript bind, javascript call, javascript apply, javascript call apply bind, javascript addeventlistener, javascript classes, javascript objects, javascript functions

Id: 2mRN8FyjnE4

Length: 7min 55sec (475 seconds)

Published: Mon Feb 22 2021