We need to talk about this, and by this, I mean this, the this keyword or this variable. It sounds kind of weird to say this variable, it doesn't sound weird to say. It probably sounds weird to hear this variable. But in JavaScript, this is a variable. We can assign values to it, which of course changes the value of this. And this is a confusing thing to talk about. First of all, because it's called this. And this is a common word that we use throughout English. So I'm going to try to use the this keyword or this variable whenever I'm referring to this here inside of code.

So I'm going to try to use the this keyword or this variable whenever I'm referring to this here inside of code. So that's the first reason why this is confusing. The second reason is because what we see in code is a lot different than what actually happens. So to start, I want to clean this up a little bit. I want to get rid of our factory function and the objects that we created with it, because there's just really no need. I want to simplify this. And really, we just need one game object. So we're going to have easyGame.

And really, we just need one game object. So we're going to have easyGame. We're doing up the game constructor, and that's all well and good. But for this discussion, I need secretNumber to be public. Normally, this would be a private field, but I need it to be public. So that we can talk about this or the this keyword. So secretNumber is going to become a public property, which means that anytime that we use secretNumber, we need to prepend it with this.secretNumber, which I think there's only three other places. Yep.

we need to prepend it with this ., which I think there's only three other places. Yep. And then finally, I want to extract the functionality of where we check the guess. So that it looks like we call this guess, we pass in the guess, and then we will essentially do what we did before. Ideally, I mean, there is a better way that we could do this by not creating this guess variable, but we'll just leave this as is because we know it works. That's what it was doing before. Then we break out of the loop, and that's fine. So that now we need to define checkGuess, where we pass in the guess.

Then we break out of the loop, and that's fine. So that now we need to define checkGuess, where we pass in the guess. And then we need to return true if the guess is equal to the secretNumber. Otherwise, we will return false. All right, so we have all that prep done. Let's talk about easyGame. So that now we can take easyGame. And since secretNumber is public, we can assign it to value. And let's just assign it 5. So that if we call easyGame.checkGuess, and we pass in 7.

And let's just assign it five. So that if we call easyGame::checkGuess, and we pass in seven. Well, we should get a message that seven is too high. Because we hard code, well, we didn't hard code. But we set secretNumber to five. We checked the guess of seven. So that if we say easyGame::checkGuess, and we pass in five, then it should say that we guessed the number. So everything appears to be working like it should. That's all well and good.

So everything appears to be working like it should. That's all well and good. Let's comment that out. So let's look at this. Let's say that I want to take the functionality of easy_game.check_guess. And I want to take this functionality. And I want to create just a standalone function. So that we could do this. We'll say standaloneFunction equals easy_game.check_guess. Now, notice I'm not executing check_guess here.

We'll say standaloneFunction equals easyGame.checkGuess. Now, notice I'm not executing checkGuess here. I'm referring to just the checkGuess property, which contains a function object. And it's important to remember that functions are objects here. We can pass them around. We can pass them as arguments to other functions. They are first class citizens in JavaScript. And this is important because we have a function object here for checkGuess. We are going to take that function object. And we are going to assign it to this constant called standaloneFunction.

We are going to take that function object. And we are going to assign it to this constant called standaloneFunction. Now, this is where the primary confusion comes from. Because if we look at this code, it looks like we are taking easyGame.checkGuess. And we are assigning that to standaloneFunction. That's not what we're doing here. We are taking the function object assigned to checkGuess. We are essentially detaching it from the easyGame object. And then assigning that function object to standaloneFunction. So, that means inside of the browser, if we do typeof standaloneFunction, we're going to...

And then assigning that function object to standaloneFunction. So, that means inside of the browser, if we do typeof standaloneFunction, we're going to... Did I save it? I didn't save it. So, we'll go back. And if we say typeof standaloneFunction, we can see that it is indeed a function. So, we can call standaloneFunction. And we can pass in whatever we wanted. What was the value we set? 5.

What was the value we set? Five. Secret number is five. So, if we pass five, you know, we might think, okay. That would give us the message that we guessed the number. But notice what we get. We get an error. This is undefined. Because, you know, as I said, we didn't take easyGame.checkGuess. And then assigned that to this standalone function.

Because, you know, as I said, we didn't take easy game.checkGuess. And then assigned that to this standalone function. We took the function object that is assigned to checkGuess. And we detached it from an object. And assigned it to a standalone constant. So, whenever we call this function, the this keyword is undefined. It references undefined. Because, you know, I've said in a couple of episodes, this literally means this object. And if we have detached that function from an object, then the object is undefined. So, whenever we execute standalone function, it is essentially executed within the context.

And if we have detached that function from an object, then the object is undefined. So, whenever we execute a standalone function, it is essentially executed within the context of undefined. And when it comes to talking about the this keyword, that is what I like to refer to as context. Because, really, this is a discussion that it can affect properties. But for the most part, it's 99% of the time we are executing or trying to execute a method. So, the this keyword essentially defines the context that a method executes it. You know, let's say that we have a keyboard directly connected to a computer. So, we pound away on the keyboard.

You know, let's say that we have a keyboard directly connected to a computer. So, we pound away on the keyboard. We, of course, make changes to whatever computer that it is connected to. So, we decide, okay, we are going to make a copy of this keyboard. And we're not going to connect it to anything. We can still pound away on it. You know, just like we could still call a function. But it's not connected to anything. So, it's not going to do what we would expect it to do, which is, you know, make changes to something.

So, it's not going to do what we would expect it to do, which is, you know, make changes to something. But then, too, we could take that keyboard. We could copy it. We could attach it to another computer. And then we can pound away on that copied keyboard. And, lo and behold, it would make changes to that second computer. It wouldn't do anything to the first computer. Exactly how this is all going to work. So, that if we create, let's have a standalone object to where we would, let's just have

Exactly how this is all going to work. So, that if we create, let's have a standalone object to where we would, let's just have a secretNumber property. Let's set it as a value of 7. So, that we have this very simple object. And, you know, objects are dynamic. We can add properties at will. So, we could say standaloneObject.checkGuess. And we could set easyGame.checkGuess. Now, once again, the code looks like we're taking easyGame.checkGuess and assigning

And we could set easyGame.checkGuess. Now, once again, the code looks like we're taking easyGame.checkGuess and assigning it to standaloneObject.checkGuess. Therefore, making us think that this is going to execute within the context of easyGame. It's not the case. It's going to execute within the context of standaloneObject. So, that inside of the browser, we can refresh. We can say standaloneObject.checkGuess. And what was the secret number? Seven, I think.

And what was the secret number? Seven, I think. We can pass in seven. And we see congrats. You guessed the number. And that shouldn't be numbers. That should be number. So, let's make that change because that's going to bother me. So, this whole idea or this whole discussion about the this keyword really boils down to context.

So, this whole Idea or this whole discussion about the this keyword really boils down to context. What is the context that a method is going to execute in? 99% of the time is going to execute within the context of whatever object that it is attached to. Now, to confuse the issue, we can create a function object that is bound to a particular context. So, like right here. Well, let's do this. Let's leave standalone function alone.

Well, let's do this. Let's leave standalone function alone. Let's create a constant. We'll say easyGameCheckGuess. That way, we know that this is bound. So, we'll say easyGame.checkGuess() to access the checkGuess function object because remember functions are objects. They have properties. They have methods. And one of those methods is called bind so that we can pass in the object that we want.

They have methods. And one of those methods is called bind so that we can pass in the object that we want to bind that function to. Now, this isn't going to modify the actual checkGuess method. This is going to create a new function object that is bound to the context that we specify. So, in this case, we have created a new function object that is bound to the easyGame object. So, we can say easyGame checkGuess, and we can pass in 5. Was it 5? I think the secret number for easyGame is 5. Yes, it is.

I think the secret number for easy game is five. Yes, it is. So, inside of the browser, we can refresh. We say congrats. You guessed the number. So, whenever you were working with methods, which, you know, to be technical, methods are function objects that are assigned to properties on an object. But we call them methods. So, whenever you are working with a function object, that function object is going to execute within the context of something.

So, whenever you are working with a function object, that function object is going to execute within the context of something. 99% of the time, it's going to execute within the context of the object that it is attached to. You can detach a function object, in which case it would execute within the context of undefined. But two, you can also create a function that is bound to a particular context so that it always executes within that context. And this is a topic that we will be revisiting several times because it's something that we always have to be mindful of, especially whenever we start working with events, because

And this is a topic that we will be revisiting several times because it's something that we always have to be mindful of, especially whenever we start working with events, because the code that executes with events is going to execute within a particular context that we might want to change at some point in time. So, we're not done, but hopefully you have enough so that we can move forward and start manipulating elements in the document object model. Thank you.