Why Object Destructuring0:00
Passing objects to functions fundamentally changed the way that we write JavaScript. I mean, I remember the first time that I saw it, it was the prototype library, which predates jQuery. It was a long time ago, but I remember seeing that and I remember thinking, wow, that's awesome. That is how I should approach things. And it became such a prominent practice that something had to be built into the language to make it easier to extract the values of whatever properties that we needed to extract values from. So that's where the idea of destructuring objects came into the language, because that is what we use now. And instead of, you know, doing all of this that we did in the previous episode, checking if we have a property, and if not, then assigning a default value, you know, all of that stuff, which, you know, we could have written this a little bit better. In fact, now that I think
Using Null Coalescing Defaults0:50
checking if we have a property, and if not, then assigning a default value, you know, all of that stuff, which, you know, we could have written this a little bit better. In fact, now that I think about it, we could have just gotten rid of all of that and use the null coalescing operator, which you are familiar with because php has it as well. And it works like you would expect, so that, you know, if we do have a minRange property, then that value is going to be assigned to the minRange variable. Otherwise, you know, whatever is on the right-hand side of that operand would be assigned. So this gives us the way to not only check and use the property if it's there, but also have a default value. So this is how we should have ended the previous episode, but I didn't. Anyway, we can make this even simpler. In fact, we can do this in all one statement. We just have to destructure our object. And it looks something like this. It
Destructuring into Variables1:42
episode, but I didn't. Anyway, we can make this even simpler. In fact, we can do this in all one statement. We just have to destructure our object. And it looks something like this. It looks a little weird, I will admit. And we start off where we want to create constants here. So we want to create three variables, minRange, maxRange, and maxAttempts. And then we will, it looks like an assignment, and I guess it really is, because we are taking the options object and we are assigning that to these three individual variables. And that's what it does. It creates three variables, minRange, maxRange, and maxAttempts. And if those properties are on our options object, then it's going to take their values and assign them to the appropriate variable. So this gets us very close to what we want. We just need to be able to set default values for these, which all we have to do is this. So that's minRange
Adding Default Values2:37
and assign them to the appropriate variable. So this gets us very close to what we want. We just need to be able to set default values for these, which all we have to do is this. So that's minRange will have a default of one, maxRange will have a default of 10, then maxAttempts will have a default of three. So now we have one statement that extracts that information out so that we can use them as individual variables and everything's fine. We don't have to do any kind of checking or anything like that. JavaScript is just going to do it for us. But we can make this a little more simple. Instead of having the statement here, which we might still want to do because this gives us the ability to create constant variables here, but we can. And this is something that's very commonly done in modern JavaScript, is we can lift this destructuring statement so that we can use it here for our parameters. So again, it looks weird, but we are still passing an object
Destructuring Function Parameters3:26
very commonly done in modern JavaScript, is we can lift this destructuring statement so that we can use it here for our parameters. So again, it looks weird, but we are still passing an object to this play method. But now we are destructuring it into individual parameters. So we will have a parameter called minRange, one called maxRange, and maxAttempts. I guess I shouldn't call them parameters because they're not technically parameters. They're variables. So we have a minRange variable, a maxRange variable, and a maxAttempts variable. But we also have default values for those. But we are also still setting a default value for this object that we are destructuring. So it looks weird, but this gives us the exact same that we had in the previous episode, except that we don't have constants here. So we could take this in one of two ways. We can destructure the object that is being passed to the method just right here, or we accept the options
Choosing Between Approaches4:20
except that we don't have constants here. So we could take this in one of two ways. We can destructure the object that is being passed to the method just right here, or we accept the options and then create constant variables for minRange, maxRange, and maxAttempts. In a lot of modern JavaScript, you're going to see the former approach, destructuring the object that's passed to the function. Either way, we're going to end up with ultimately the same results. We will end up with three variables that we can use throughout our function without having to actually reference the object that was passed to the function, except that in this case, we have just normal variables. Otherwise, we would have constants. And really, it's up to what you need within your code.
within your code.
