JavaScript is an object-oriented programming language, therefore, it's important to know how to work with and understand objects. And, you know, even if you take a fully functional programming approach with JavaScript, which you kind of can do, you will still have to work with objects. So, this is a topic we need to spend some time with. And in this episode, we will primarily talk about creating objects. So, the first way that we can create an object is just like with an array. We can new up the Object constructor, but this is something that you typically don't see. You might see it here and there, but for the most part, when you create an object or you see someone create an object, you are going to see object literal notation, which begins with an opening curly brace and ends with a closing curly brace. And then once you have an object, you can start to populate it with your properties. Now, in JavaScript, objects are completely dynamic.

And then once you have an object, you can start to populate it with your properties. Now, in JavaScript, objects are completely dynamic. You can also refer to them as like expando objects, because all you have to do is assign a variable. All you have to do is assign a value to a property on an object, and voila, you have a property. So, to do that, we would use the name of our object, followed by the dot, and then the property name, firstName in this case. We're going to assign it the value of John. And so, therefore, we have just created a firstName property on our person object. We can do the same thing to create another one, but let's look at a slightly different syntax to where we would use square brackets, so that it would look like our person object has a lastName key, and then we can assign that the value of doe. So, when it comes to working with objects and you need to access a property, you can do so in two different ways.

so that it would look like our person object has a lastName key, and then we can assign that the value of doe. So, when it comes to working with objects and you need to access a property, you can do so in two different ways. You can use the dot operator to get access to the property, or you can use square brackets, which really looks like person is an associative array. And we'll look at a comparison between JavaScript and php here in a little bit when it comes to creating this. I'm going to call it a data structure, because that is what an object is. It's a data structure. So, we have a firstName. We have a lastName. We can also create what is logically a method, but it isn't really technically a method.

We have a last name. We can also create what is logically a method, but it isn't really technically a method. It is technically a property that references a function. I'm splitting hairs, but that is the case. So, we're going to call this getFullName, and we are going to assign it a function, to where we will return this.firstName, and then we want this.lastName. Now, even though I created the lastName property using the key value pair approach, we can still access that property using the dot, so you can interchange as you need to. Typically, you want to be consistent, but sometimes you just can't get around using the key value approach. But anyway, this creates what is essentially a method called getFullName on our person object.

Typically, you want to be consistent, but sometimes you just can't get around using the key value approach. But anyway, this creates what is essentially a method called getFullName on our person object. So, if we wanted to call this, all we would have to do is say person.getFullName. We would execute it, and then in the browser, we will see John Doe in the alert box. Now, one thing I want to point out is my syntax here whenever I create getFullName. If you'll notice, I end this with a semicolon, and you don't technically have to do this, but remember that this is an assignment operation. I am assigning a function to a property. So, in my mind, I need to end this with a semicolon. You technically don't have to, but I'm in the habit of doing it,

So, in my mind, I need to end this with a semicolon. You technically don't have to, but I'm in the habit of doing it, and I will never not be in the habit of doing that. So, all of my assignment statements are going to end with a semicolon. Now, you can create your objects just like this. You can create the object and then individually assign and create the properties on that object. But a lot of time, you already know what the structure of that object is going to be, in which case, you can just go ahead and define those properties whenever you create the object itself. And you would do that by specifying the properties inside of the object literal. The syntax is a little bit different in that we have the property name followed by a colon.

And you would do that by specifying the properties inside of the object literal. The syntax is a little bit different in that we have the property name followed by a colon and then the value for that property. And then we would have a comma to separate these property definitions. This isn't too far different from associative arrays in php to where we would have the firstName key, then the arrow, and then the value. There is, of course, some difference here, but for the most part, the idea is the same. You have your key, you have some kind of syntax to say this is the value for that key, and then you have your value. In JavaScript, it just so happens that the key is our property name,

and then you have your value. In JavaScript, it just so happens that the key is our property name, the assignment syntax is the colon, and then the value is, of course, the value. Now, you can technically specify your properties using strings. That is valid, but I don't recommend doing that. There are some reasons why you would want to do that, and we'll talk about that later on. But when it comes to just pure, unadulterated JavaScript, there is no need to use strings here. Whenever I see strings for the property, I typically think of a JSON structure, which a JSON structure is, well, it's not a JavaScript object.

Whenever I see strings for the property, I typically think of a JSON structure, which a JSON structure is, well, it's not a JavaScript object. It represents a JavaScript object, but JSON is a data format which kind of looks like a JavaScript object, but it is not a JavaScript object, whereas a JavaScript object has slightly different syntax. Once again, I'm splitting hairs, but when it comes to creating an object using object literal notation, I recommend just using the property name. Don't make it a string. Just use the property name and then give it the value.

Don't make it a string. Just use the property name and then give it the value. So then we can have the getFullName, which is going to follow the same pattern because all we have to do is assign the function to it, in which case we will once again return this.firstName, this.lastName. Now, I don't think I talked about this. If you've done any kind of class programming with php, then you probably know what this is. It typically means this object. So inside of a method on an object, it literally means this object,

It typically means this object. So inside of a method on an object, it literally means this object, and so this is getting this object's firstName property and this object's lastName property. There is some nuance there, which we will talk about later, but for right now, this refers to this object. Now, we can define getFullName using a shorter syntax. Instead of using the colon followed by the function keyword, we can just say that getFullName is going to be a method, and that's it. I like this syntax.

we can just say that getFullName is going to be a method, and that's it. I like this syntax. This is how I define my methods on my objects. Of course, you don't have to follow what I do, but I like it. So this is the approach that I take. There is virtually no difference. The JavaScript engine is still going to create a method called getFullName. It's just that we've done so using less keystrokes. So now the question becomes, how can we apply this idea of objects to our existing game?

So now the question becomes, how can we apply this idea of objects to our existing game? And the answer is quite a lot of different ways. I'm going to take the most straightforward approach, which would be to, instead of returning a function that we would call to play the game, it will return an object that we'll just call game. And the idea would be something like this, kind of like how we returned a function here. We would return an object, but we're going to have two methods. We will have the play method, and then I want to be able to reset the game.

We would return an object, but we're going to have two methods. We will have the play method, and then I want to be able to reset the game. So we will have a reset method. So this is going to return this object to this game variable, which means that inside of the browser, we will call game.start or game.reset to reset. Now, if we are going to reset, that means that we need to think in terms of being able to reset our game. And the first thing that comes to mind is that our secretNumber is a constant value.

And the first thing that comes to mind is that our secret number is a constant value. If we want to be able to reset, it can't be constant. So I'm going to make that just a normal variable so that inside of the reset method, we can simply change the value of secretNumber. And we also want to reset the history. And we can reset an array in a variety of different ways, but I think the easiest thing to do is just to set its length as zero, therefore resetting that array. So that's going to reset.

therefore resetting that array. So that's going to reset. Now, when it comes to playing the game, we can essentially just lift the code that we had from our function, and we can paste that inside of play. I don't think we really need to make any modifications to that play method, but let's just go over just to make sure. So we are going to iterate while the length of history is less than maxAttempts. We get the input. We try to validate that.

We get the input. We try to validate that. We push the guess into history. Yeah, everything should work just fine, except that now we don't have this playGame function. Instead, we have game.play. So we will go ahead and play the game there. So that's inside of the browser. It will start up the game. Let's guess, and we guessed the number 2, so great.

It will start up the game. Let's guess, and we guessed the number two, so great. Let's reset the game so that we can play it, and then we'll try this again. Is it one? No. Is it five? Yes, it is five. I've gotten pretty lucky here. So once again, let's reset. Let's play the game.

So once again, let's reset. Let's play the game. Let's see if it's eight. I'm going to buy a lottery ticket because apparently I'm pretty lucky today. So there we go. There are, of course, a lot of other things that we can do to incorporate objects into our game, and we will look at those different ways in the next few episodes.