The keyword this in JavaScript confuses many seasoned JavaScript developers, as well as beginners. And that's one of the reasons why it's important to become a student of the language. It's not good enough to just learn what needs to be done. To copy some code from the internet to solve your problem. It's important to understand why that code works the way it does. So we're going to spend a little bit of time in this movie, helping you understand this.

Now in the previous movie, we looked at the example of creating the user one object using literal Object Notation. We had several methods within this object. For example, login check. We used the this keyword and in all of these examples, This referred back to the object that was referenced by the user one variable. And so when we said this dot birthdate, it would grab the data that was assigned to birth date. Using this object example, we can define the keyword this as referencing, or referring to the object that invokes the method or function.

And that definition works for these examples. The object in this line of code down here at the bottom, the object that invoked login check, is right here. This object, that's what that variable contains. So that object, invoke login check. So this refers to that object. Alright to expand on that concept, Let me open the console.

And let me enter something else really quick and enter that code right there. So I'm set setting a variable, forgot my var keyword, setting a variable, my name equal to Steven Hancock, and then creating a function expression, print name, and it's simply going to log to the console this.my name. So what does this refer to in this context? So let me press return to find both of those. Now, let's go ahead and execute print name. Put the parentheses after the variable to indicate that it's a function and it should execute.

When I press return, what's it going to log out? It logs out Stephen Hancock. So why does this refer to the variable up here? By does that work? Well, that has to do with the global object. We talked about in previous movies, the global environment, things created on the global environment.

Well, that's another way to refer to the global object when the JavaScript engine starts. So for example, when an HTML page loads, the JavaScript engine starts and interprets the JavaScript that is in there, when that happens, it creates a global object. And certain things are defined on that global object. All of our JavaScript code that defines variables in a global environment, really define those variables as a part of the global object. So therefore, this in this context, refers to the global object. If I simply type this into the console, it comes back with window.

If I open that up, you can see as a whole bunch of stuff in there This really is the window, the browser window that contains the HTML page. Now the global object isn't always that, because we don't always execute JavaScript in a browser, there are other environments where we can execute Java, JavaScript, and in those environments, they still have a global object. Alright, so this can sometimes refer to that global object. So now we have two situations. This can refer to the object that invokes the function. And this can refer to the global object.

Now, where this becomes more complex to understand is when we're dealing with more complex applications of functions. If you think about it, everything in JavaScript most everything in JavaScript is an object functions are an object. So a function that includes The key word this would need to have this resolved. And that's where we can run into some difficulties when we start doing more complex things with functions, such as callbacks and closures. We have not talked about what those are, and we won't in this Getting Started course. But those are topics that we address in the advanced courses.

And it is in those situations where this can be more confusing. Let me try to just give a few examples in a more simplistic way, so that you are at least aware where the definition of this is not so clear cut. All right, I'm going to copy some code and paste it into the console here. So what I'm doing, let me go through that before I press return. I'm declaring a user three variable and setting it to a An object. This object has a first name property, a last name, property, and full name, which is a method.

And the full name method simply logs out the first name plus last name. Notice that we use this. So that's very similar to what we did in the example In the previous movie. So if we call user three dot full name, and invoke that method, it will print out Steven Hancock. Now in this second variable I've declared I'm defining an object as well, I'm setting first name equal to Barry last name equal to Smith. But notice what I do for F name.

Basically, I'm copying the function from this object. So it's going to copy there are no parentheses here. So it's not going to execute the function. It's going To copy it. And so it's going to copy this code and put it here. So what will this refer to in that case, let's go ahead and press return.

And take a look. Let's enter user four dot F name, I'm going to put the parentheses at the end, because that will tell it to execute the code. When I press return. Ah, it gets Barry Smith, it gets the first name and the last name of the object. Well, that makes sense in this context, because this should refer to the object that invokes the method or function, and that object is user four at this time. The important thing to realize from this example is that really has nothing to do with the context.

So the code was written here and user three when it was executed, though it was executed as a part of user four All right. So that's an important thing to remember. Let me show you one more. Other example that might be might not be quite as intuitive. Just going to create a variable. And I'm going to set that variable equal to user three dot full name.

Once again, I'm copying that function into another variable and this variable is at the global level. I press return. Whoops, I left out my assignment operator. Now I press return. Copy the function to the variable test. Now if I execute test by putting parentheses at the end, what's gonna happen?

It comes back, undefined, undefined. Why? Well, because this dot, first name is undefined. There's no first name. attach to the global object. And this last name is undefined.

There's no last name attached to the global object. So in that situation, the object that executed or invoke the function was global. And so it looked for a first name and a last name associated with global and could not find that. Now if I declare that and then execute test again, what do we get? Well, we get Sarah as the first name and undefined as last name. Okay, so that hopefully that helps you see how global object is involved here.

Finally, one more example I want to include, and then we will sum up about this and the goal object. Notice this object I'm creating user five equals first name is Jerry. nickname is this dot first name. Well, what is that going to refer to? Your right, if you're thinking oh, that's going to refer to the global, it's not going to refer to this object, because we are not invoking a method or function. And this is where it can get a bit confusing understanding what this is doing.

Let's go ahead and press return. Now let's go ahead and see what user five nickname has been defined as Sarah, it grabbed first name, because we defined it here. Okay. So it did not refer to this first name inside its own object. This in this case refer to the global object. Alright, so that can be a little bit confusing.

But it is also I think, exciting to better understand This, it's empowering. Too many JavaScript developers don't understand it fully. And so it's important to be a student of language and understand it the way it needs to be understood, so that when something happens in your code, you can realize, Oh, that's why that's happening. Alright, let's summarize what we've learned about this this thus far. First off, the global object is created whenever the JavaScript engine starts, there's always a global object created. The keyword this refers to the object that invoked the function or the method.

Otherwise, this refers to the global object. Those are some key points to remember about this to help eliminate confusion. All right, let's move on to the next topic.