ToBoolean Ceoercion

[00:00:00]
>> Will Sentance: Introducing the to boolean, that is to true or false coercion. So let's check if our user actually submitted a valid quantity. So neither zero nor empty string, so for now, this is the problem with live editing our blackboard, it gets a little bit of work. But now let's actually check, and we're doing this to highlight that our last coercion type. Now let our last primitive coercion, we'll see more in a second, let's check whether our donation was actually donation or quantity, yeah, our quantity was actually submitted.

[00:00:56]
So we want to ensure, and actually, we talked about the interface there between the UI and the JavaScript runtime, and one of the interesting aspects of the interface is often, if we put a listener on our, that's to say, we're going to have some code in JavaScript run when action happens here by the user. We may well have a listener on the user cursor entering the quantity field, which might then pass through an empty string into quantity, at least initially.

[00:01:30]
Maybe you've seen this in the very reactive nature of React, that when the user takes an action, the state in theory, in JavaScript changes, and the view is then updated accordingly, in this case with nothing because the user has put their cursor there. Now our data is an empty string, and that's also maintained here in the view. That's just one way of thinking about UI, but we don't want the user to press submit and be able to submit if they haven't yet filled out a quantity.

[00:01:58]
Simultaneously, if they've filled out a quantity of 0, we don't want that to actually be filled in, submitted either. So either the user hasn't typed something in, and we've got an empty string here, or the user's put 0 and we've got the value of 0 here as a string, neither of those do we want to have inaccurately lead to a submission by the user. So what can we do?

[00:02:27]
We can actually, in our conditional, rely on the final coercion, that is the to boolean. That's going to allow us, as we pass in our empty string or our value of 0, to immediately coerce to a boolean, and that, oh my goodness, we're going to have to have made one change here, oof, we're going to have to have coerced immediately our donation to the quantity of 0, the number, so either the number 0 or empty string, not the string 0, but the number 0 or our empty string, and we do not need to check both of these for our conditional.

[00:03:21]
We don't need to check is quantity the number 0 or the empty string, because of our to boolean coercion. So when we call, or when we run our conditional and pass in our quantity. Our quantity value here can be either 0 or an empty string, and we're immediately going to, and let's start with 0, we're immediately going to coerce that into false, if it's an empty string, it's also immediately going to coerce into false, and we will skip our if and head straight to our console log, add items.

[00:04:04]
We just run our if on our quantity, and it starts at to boolean, that is to say, it starts our, let's do it in blue, it starts our true or false coercion. OK. But what if we want to treat 0 and the empty string differently? For example, for our donation, where we don't want to have the empty string and 0 behave the same way. Whereas for quantity, whether or not it's they've typed in 0 or they just haven't typed in anything, we want to prevent submission, because we want to have a number of items being purchased.

[00:04:50]
But for donation, a 0 is totally fine. An empty string is, do you still want to donate? So we could explicitly check donation is zero with our what's called loose equality. Let's check if our donation, we can probably do this just below, let's check if our donation is actually 0, if it is 0. Then we say, no donation, no problem. However, the problem is, if it's an empty string, our empty string through the wonders of our coercion, is also coercing to 0.

[00:05:46]
Is 0 equal to 0, you bet it is. In fact, there's no way here for us to reach our else. Want to donate? Because we've managed to, in our check on is donation zero, our empty string from donation being, I haven't typed it in yet, which I want to tell my user, hey, do you actually want to donate, do you want to fill in the gap here? I'm off, busy saying, no problem, no donation, $0 donation, which I really only want to have run when I have my $0 donation get submitted, where I say, no problem, $0 donation is fine.

[00:06:26]
Because it turns out that our equality, which surely should be something where when we compare either side, we are comparing what's actually there, even our equality, our check, is this thing the same, even it kicks off in this case to number coercion of the other side, when one side is a number 0. And it did, it kicked off coercion of the donation value, which we said is an empty string because the user hasn't yet typed something in.

[00:07:00]
And it coerced it to zero. The very thing we want to say, yeah, no problem, but not allow us to reach the want to donate, which is what we want to have happen when the user has started with our empty string and hasn't yet submitted a donation value of 0 potentially. Because to coerce coerces our empty string to 0, so even if we wanted to distinguish between 0 and the empty string, we couldn't.

[00:07:33]
But fortunately, people, we do have at least one bloody operator in JavaScript, the triple equals that only compares what it actually sees and does not try and coerce either side before it does a comparison. Now look, I get it, that maybe compare, maybe if you're doing a relational, you might want to do some coercion, because you want to do comparison of numbers if you want to, maybe math, you might want to do some coercion because you want to multiply numbers if you can, but to have an equality, a check of are these things the same, which kicks off a complex web of coercions, depending on what's either side, now that is wild, but fortunately we have our now standard triple equals, that is not going to kick off any coercion pipeline, and in that case, our empty string.

[00:08:37]
Our empty string is not equal to our 0, and so we're going to hit our console log, want to donate? You haven't put anything in yet. And if you had put 0. Then he would say, great, no problem, no donation, no problem.