Resetting Game State0:00
Objects play a very important part in modern JavaScript because any time that we can represent a data structure as an object, we do so. And one of the popular things to do is to essentially organize our function parameters as objects. So let's say that, well, let's just look. Our play method here, well, let's back up. We need to address some things because we don't really need a reset method because any time that we play the game, we should be resetting the game anyway. So let's get rid of the reset method. And then let's bring down these variables because every time we play the game, we should have a new secretNumber. We'll reset the maxAttempts and reset the history. So that's fine. But let's say that we want this to be a little more flexible.
Adding Configurable Options0:51
So that's fine. But let's say that we want this to be a little more flexible. Whoever is going to play the game should also be able to define the rules or define the options that the game is going to use, such as setting the range so that we can have, you know, instead of just always being 1 to 10, you know, they can supply a minRange, a maxRange, and then a maxAttempts. That way, you know, things can be a little bit more flexible. That does mean that we need to make some changes here. So whenever we create our secretNumber, which we can change back to a const here, we still want to call Math.floor. We will still generate a random number. But instead of multiplying that by 10, we will do this. We will say maxRange - minRange + 1.
But instead of multiplying that by 10, we will do this. We will say maxRange minus minRange plus 1. And then instead of saying plus 1 over here, we will plus by minRange. That is going to generate a random number between the range that's specified. So we're going to be good there. We don't need the maxAttempts variable because that is being supplied as a parameter. And I think that's really it. Well, no, right here where we check the range, we need to see if the guess is less than minRange or the guess is greater than maxRange. But I think that that's it. I think everything else should be fine so that now whenever we play the game, we can supply those values and we can play according to our own options.
Setting Default Parameters2:16
But I think that that's it. I think everything else should be fine so that now whenever we play the game, we can supply those values and we can play according to our own options. So let's give it a try. Inside of the browser, we will call game.play. And you know what? If we just don't pass anything, we should have some default values there, shouldn't we? So let's do that. Let's add some default values so that minRange can be 1, maxRange can be 10, and then maxAttempts can be 3. So, you know, our default settings that we used before, we can still use here. It's just that that's the default.
Testing Custom Settings2:48
So, you know, our default settings that we used before, we can still use here. It's just that that's the default. If you want to supply other options, then you can do that. So we'll go back so that now we can call game.play. And we should be able to guess this, hopefully. And 9 is not it. It was 10. Okay, so let's change this so that we will play a game that has a range of 20 to 40, and we have 10 guesses. So let's start with 25. That's too low.
So let's start with 25. That's too low. Let's go up to 30. Okay, so 28. Nope. 27. Nope. 26. And there we go. So we can be reasonably assured that everything is working as it should because, you know, our guess was within the range,
Passing Options Object3:32
And there we go. So we can be reasonably assured that everything is working as it should because, you know, our guess was within the range, and the attempts were at least more than the default, which was 3. So I think we're good there. But instead of passing three values to the play method, what I want to do is be able to do something like this so that we can call play, and then we can pass in an object. And this object can have, you know, a minRange property, which we could set as a value, a maxRange property, which would be a particular value, and then the maxAttempts. But, you know, I would also want to be able to omit any one of these, which means that we need to do some work here because if we pass in minRange but don't pass in maxRange, if the maxRange is actually less than the minRange,
But, you know, I would also want to be able to omit any one of these, which means that we need to do some work here because if we pass in minRange but don't pass in maxRange, if the maxRange is actually less than the minRange, you know, things get a little wonky. But I don't know if we want to go that deep into this. We'll have to think about it. But, you know, this is basically the idea that we want to do, so that we pass an individual object where the properties would then determine the behavior of that function. So the properties would essentially be the parameters. It's just that we're passing an object. And you might think, why?
It's just that we're passing an object. And you might think, why? Why take this approach? And it makes some sense from a logical standpoint because this is all information that's needed for this function or this method to behave as it should. So this gives us the option to build an object beforehand, and then we could pass that object to the play method so that it would look something like this. And that is powerful just by itself because there are a lot of times when we need to build an object with dynamic information so that we can pass it on to something else that's going to work with it. But two, you know, this information is all related.
so that we can pass it on to something else that's going to work with it. But two, you know, this information is all related. It's related to how the play method or the play function is going to execute and how it's going to behave. So it kind of makes sense to kind of organize it as an object as well. I'm not saying that this is the correct approach, but this is how a lot of modern JavaScript is approached today. So that means we, of course, need to make some changes here so that instead of having these three parameters, we would just have an options object. But we could go ahead and we can say that we would have a default value of an empty array. And, you know, actually, we want to do this because when it comes time to start checking if we have those individual properties, it makes it a whole lot easier so that we could do this.
Applying Defaults from Options6:17
And, you know, actually, we want to do this because when it comes time to start checking if we have those individual properties, it makes it a whole lot easier so that we could do this. Type of options.minRange is undefined. Then we will set a default value for minRange. If options was not defaulted to an object, we would have to do this. And type of options.minRange because we want to be sure that we actually have an options object to work with. So we have to check if options exists and we have to see if the property that we want to work with is also available on the object. By just setting a default value as an object, that saves us a lot of typing here. So we essentially want to do this same thing for the maxRange and the maxAttempts. So let's quickly make the necessary changes.
So we essentially want to do this same thing for the maxRange and the maxAttempts. So let's quickly make the necessary changes. It's just changing the property name and the value that we assign to it. And then we have maxAttempts, which the defaults we'll just set to three. So the minRange is one, max is 10, and then the maxAttempts is three. But then we also need to address this inside of the function because now we don't have those individual variable names. We have an options object that has those properties. And there are ways that we can make this a lot easier. I'm going to take the long way in this particular episode so that in the next episode we could look at the nice short way. So here, then we can say our minRange is going to be options.minRange.
I'm going to take the long way in this particular episode so that in the next episode we could look at the nice short way. So here, then we can say our minRange is going to be options.minRange. Our maxRange is going to be options.maxRange. And then finally, our maxAttempts is going to be from options.maxAttempts. Yes, it's verbose. Yes, there's a better way. We'll talk about the better way in the next episode. But now this gives us a lot of power because we can call the play method as we did before, and everything is still going to work as it should because we have those default values. So five is too low.
and everything is still going to work as it should because we have those default values. So five is too low. Eight is too low. Ten is too high. It was nine. Okay, but now we can call gameplay. And if we wanted to change this to maxAttempts, we could do that. We could say we want ten attempts, in which case now we should be able to get this without any problem because we aren't going to run out of attempts. And sure enough, that is the case.
because we aren't going to run out of attempts. And sure enough, that is the case. So as you start to incorporate JavaScript in your applications and you start to write functions and use functions, start to think in terms of objects because JavaScript is an object-oriented language, and we use objects for just about anything that requires us to organize structured data. And it doesn't matter if you don't plan on using any kind of framework, but definitely any framework that you pick is going to use objects as parameters. React, Vue, Svelte, Alpine. Even if you don't want to go that route and use something like jQuery, this is a concept that is prevalent through modern JavaScript.
Even if you don't want to go that route and use something like jQuery, this is a concept that is prevalent through modern JavaScript. So start using it in your own code. But of course, as you saw, this is a little verbose. There's a lot of typing involved, which destructuring actually solves, which we will look at in the next episode.
