Check out a free preview of the full Getting Started with JavaScript, v2 course

The "Booleans" Lesson is part of the full, Getting Started with JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle displays the list of falsy and truthy values in JavaScript, and explains how the falsy list can be used to know which values will become true or false during conversion to a boolean value. Examples are given in the form of if and while statements.


Transcript from the "Booleans" Lesson

>> Kyle Simpson: Let's talk about booleans for a moment. You probably know about the true and the false boolean. But there's this bigger concept called falsy and truthy. And that sounds a little bit strange, but basically what it means is, which values, if we try to convert them into a boolean, would become false?

We call those falsy values. And which values, if we try to convert them into a boolean will become true? Well, JavaScript defines a very specific narrow list of values where when they're converted to boolean become false, and they are these values. The empty string, the 0, and I know -0 looks a little strange, but that's an IEEE thing.

There is a -0 there, null, NaN, false, and undefined. For the most part, these are pretty self explanatory. They basically seem they represent things that we would generally call false. And they are things that if we took a value of any of those, any of those values, and try to convert it to a boolean.

Maybe with the capital B boolean functions or with the explanation, the double explanation mark usage. Either way if we try to converted into a boolean, we're gonna get false. That's the smallest that's defined and basically everything else becomes true when you try to convert it to a boolean.

So here's an example of those kinds of values. Quote foo and 23, and objects, and arrays. Basically an infinitely long list of values. There is just the falsy values that become false, and everything else becomes true. So, if I do an if statement, for example. In an if statement, the thing that we pass, the expression that we pass to the if statement has to result in a boolean.

And if it doesn't, JavaScript going to invoke that boolean conversion. So here we're passing it a string, because studentsInputElement.value is giving us a string, remember. We're giving it a string, and then we're saying an if statement, well, which string value produces true? That's basically anything other than the empty string.

They're gonna all produce true. But the empty string is gonna produce false. So idiomatically, what we're saying on line one is if anything has been typed into the input box, then we wanna do something with it. If it hasn't been typed into the input box, we don't. Now, I just wanna call out that this is not particularly safe, because you could type the word hello into that box.

And then on line three, when you try to turn it into a number, you're gonna end up getting the NaN number because the word hello is not a valid number. So it's not particularly a great check just to see if it's NaN empty. You usually wanna see if it's got only numeric characters in it, for example, and those are more sophisticated tests.

Another place where we have a boolean conversion that automatically, that implicitly happens, is in a wire loop. Again, the test clause, it automatically converts something to a boolean. Because the .length property is already a number, then basically what we're gonna be saying is if it's anything greater than zero, we're gonna assume that that's true.

And if it's zero we're gonna assume it's false. This is a much more common and more idiomatic, and generally more safe kind of assumption that zero becomes, is thought of as false. And everything NaN zero, everything greater than zero becomes true. Just pointing out that if your number expression can be NaN, NaN is a falsely value.

So you have to be careful of that. In the case of the .length property, we know it's always zero, or greater than zero can never return NaN. We don't have to worry too much about that.
>> Kyle Simpson: And maybe slightly better and more explicit way of doing this, rather than relying upon that implicit coercion.

Would be to actually specifically say, I wanna turn this string into a boolean. Line one, you'll notice that I'm using that double exclamation mark. That is the equivalent of calling the capital B boolean function. I'm saying, turn this thing that is a string into a boolean. We still have the same problem that if I turned a string like hello into the boolean true.

That's still not gonna end up creating a valid number on line three. But line one on the second snippet is a little bit safer because we're more explicitly saying, keep doing this loop as long as the length is grater than zero. As long as there's still new students in the array, keep doing this loop.

So that would be a more explicit way of doing the number comparison or the number coercions, but either one of those is valid ways. As long you're careful with the corner cases. Now, I said that we sometimes want to avoid implicit coercion, but sometimes implicit coercion can be quite useful.

So we see here that if I have an workshopEnrollment1 that has 16, and workshopEnrollment2 has a string value because we're pulling it out of some DOM element. If I want to check for whether or not one is less than the other, then I could do it explicitly like I'm doing on line four.

I could force both of them to be numbers. And that definitely would work, but it's kind of cluttered a little bit. And we could note that the less than operator and those other comparisons, they automatically convert things to numbers if they're not already numbers. So if we were to just simply say workshopEnrollment1 less than workshopEnrollment2.

As long as at least one of them is a number, it's gonna do a comparison numerically. If they're both strings by the way, it's gonna do an alphanumeric like a dictionary comparison. But as long as at least one of them we know is a number, it might be just as safe and a little bit cleaner to do something like line eight.

So implicit can sometimes be useful.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now