2.4 Properties, Booleans and control flow - Video Tutorials & Practice Problems

<v Instructor>Like almost everything in JavaScript,</v> strings are objects which among other things means that they have properties, which are pieces of data attached to them. In fact, as it turns out, strings have only one property which we'll look at in this section. And then throughout the rest of this tutorial, we'll look at other objects and some of their properties. Along the way we're going to talk about booleans, which are true and false values and also control flow, which is a way of controlling what happens when executing a program. That'll make a lot more sense once we look at some concrete examples. So let's start with our node here. Our node REPL. And let's look at the length property of a string literal. So let's look at a badger who doesn't care that we're calling length. All right, here we are, badger.length and you can see that it has length of six. So the way that we access one of these properties is just with the dot notation. We saw something similar to this with console.log, but you'll note that console.log had parentheses at the end. Here there are no parentheses. So in JavaScript, properties do not have anything after the name of the property. One common use of the length property is in comparisons. So let's take a look at some of those. We can do badger.length. We can compare this to a number, saying it's the number three. You can say, is this greater than three? It should be true. You can see that the REPL just responds with true, which as we'll see in a moment is a boolean value. We can also ask if it's greater than six. It's not though. It's equal to six. So this is false. But we can say, is it greater than or equal to six? And that gives us true. We can also go the other way. We can say, is it less than 10? That's also true. And we can ask if it's equal to six, so we can do this here. The way to do equality in most languages is with a double equals. And this does work in JavaScript, but there is a warning here. I'll show you in a second. So this is true, but check this out. Let's look at the string one and compare it to the number one. So you can see the results here is true, which is really strange. That's probably not what we want. And so JavaScript has a stronger equality comparison to this triple equals. That gives false here. By the way, you might have noticed that I forgot to include the semicolons here. This is the thing that happens from time to time when using the REPL 'cause it really doesn't matter. And I would guess that most people when using the REPL don't include the semicolons. For consistency, the text always uses semicolons, but that's the kind of thing. It doesn't really matter. One of the most common uses of booleans is in control flow, which is mentioned before as a way of determining what happens in a program. So let's look at a concrete example. Let's create a variable. There's a password. We'll make it a password that's actually too short for our comparison and you'll see that in a second. It's called foo 'cause I don't know what else to call it. So let the password equal foo and then we can say if password.length is less than six, we're gonna return a value that says the password is too short. So you'll note here that I say, if open parenthesis. Now I can call this length property .length on a variable. It doesn't have to be on the string literal. And I'm gonna say, if this is less than six, then return the value, password is too short as a string. The syntax I'm about to type in is characteristic of C like languages. We use curly braces to indicate that there's a new block of code. So if password.length is less than six in parenthesis open curly brace, password is too short, and then closing curly brace. And because it is less than six, the length here, we get the return value, password is too short. Let's make the password long enough. You can say that password equals foobar. Ah, this is actually a good demonstration. We're gonna get an error here. So this is six now. So it's not less than six. It's equal to six. So you can see, I got an error here from the node REPL. It says that the identifier password has already been declared. That's because I use let again here. But what I need to do is just assign password because it's already been created. So the way to do that is to get rid of the let. So now we can do the same if statement. Do if password.length is less than six, let's do the same thing in terms of if it is less than six. Of course, it isn't. Password is too short, close curly brace. And then we can say else, open curly brace, password is long enough, and then close curly brace, and you should evaluate this second branch. It's what it's called. So the first branch and the second branch. So the second branch is the one that should be evaluated because password.length is equal to six. So this here is false and we get password is long enough. Now let's take a look at how we can combine booleans. We'll start with what's called and, where we can have A and B. And we wanna say, well, when is the combination A and B true, and when is it false? So for example, suppose A is I want french fries and B is I want a baked potato. So the question then is, do I want both french fries and a baked potato at the same time? So suppose that I want french fries, true. And this double ampersand operator is and. I want a baked potato, true and true. Well, they're both true. So the combination is true. Suppose that I don't want fries and I do want a baked potato. And you say, well, do you want fries and a baked potato? Well, that should be false 'cause I should need to want both of them for the combination to be true. So false and true is false as required. Similarly, if I want fries but not a baked potato, then combination is false. There we go. And if I want neither, then saying I want french fries and a baked potato. If I don't want either, the combination is false. False and false is false. This is what's called a truth table. You can find it in a course on logic where it's actually just a little table, but here we've actually implemented it in code. Let's use and in a conditional. That is say this statement, let's say, we use x and y for brevity. So x is foo and y is just the empty string. And now I wanna make a statement that says, if the length of both of these things is zero, then both strings are empty, which they aren't, but we'll see the two branches. We'll have an else branch too. So if x.length number triple equals, if this is equal to zero and y.length is equal to zero, open curly brace, both strings are empty. Close curly brace, else, open curly brace. So both of these things have to be true. They both have to be zero for this branch to be evaluated. And although y does have zero length because it's empty, X doesn't have zero length. The second branch will be evaluated. So here we go, we've got this return, close curly brace and now it'll evaluate it. It should be the second one. There it is. The compliment to and is or. This is where one thing can be true or the other thing can be true. Going back to the example of french fries and baked potato, there's actually a gotcha here. So suppose I say that I want fries or a baked potato. In this case, we can write that as true. Then two vertical pipe characters or true. Now colloquially, if I say I want fries or baked potato, it means I only want one of them, but in boolean logic, that's a different kind of or. That's actually called an exclusive or. The general or is true even if both are true, even though colloquial usage is different. But the other ones are more intuitive. If I want french fries, but not a baked potato, true or false. The combination is true 'cause I want at least one of them. Likewise if I don't want fries, but I do want a baked potato, then I do want one of them. And if I want neither, then if I don't want fries and I don't want a baked potato, which is to say I want no fries and I want no baked potato. False, false, combination is false. By the way there's a hint there that there's a connection between and and or. If I said, if I don't want fries and I don't want a baked potato, there's a negation in there. So we'll be talking about that in a moment. But so that's actually a hint that our language actually corresponds to the this boolean logic to a certain degree. Let's use or in a conditional though before moving on where we've got x and y. So x is foo and y is empty string. So now we can say if x.length triple equals zero or y.length triple equals zero. one of the strings is empty. Else, neither of the strings is empty. So if the length of the first one or the length of the second one is zero, then one of them is empty. And so it should be this branch that it's evaluated, which is what happens. So I alluded briefly to the idea of negation, which in JavaScript is written with the bang character or exclamation point. So for example, we can negate true, get false. Similarly, bang false or not false is true. So we can do something like this. If not, x.length equals zero. This is actually required, this extra parenthesis. You can try it without it. Actually let me try that. Let me let show you how it works without it. You'll see that there's a mistake. So x is not empty. So actually let's just do this here. Yeah, I did a closing brace and it's complaining. It's not even working. Yeah, so this is because I need an extra parenthesis here. So I can do this here and then you could just copy this. Else. X is empty. Remember it's equal to foo though, so it should be, x is not empty. There we go. But this is a little awkward this if bang x.length triple equals zero. It's far more common in this context to negate the comparison itself right here, this triple equals. So we can change this to a not equals by just changing the first equal sign like this. Not equals zero. So it's still one character followed by two equal signs. Just copy and paste this here. Else, X is empty. Should work just the same. There we go. As a final comment I'd like to note the very special and useful bang bang operator. So if bang true is false and bang false is true. If we do bang bang, true, get back to true. So in other words, bang bang is the boolean truth value of true 'cause true is true by definition. But what this lets us do is convert things like say the string foo into a boolean context. So it turns out that everything in JavaScript has some boolean truth value in a boolean context. But if I just do this well, it's just foo. So in order to force JavaScript to evaluate this as boolean and in particular to tell me what's the truth value of the string foo, I can say bang bang. And this lets us determine the truth value of things that we might suspect could be false. So for example, in many languages, the empty string is considered to be false. What about JavaScript? Yep. So this is the kind of thing that varies from language to language. And quite a lot of languages, things that are empty are false while things that aren't empty are true. But some languages, for example, Ruby assign true even to this value. So you've gotta be careful. Let's look at just a couple more examples. Bang bang one, so you might expect that's true. Zero is true in some languages, false in others. It's false in JavaScript. This idea of context dependence is important. The most straightforward way to get the boolean value of something is to use bang bang as we've just seen. But it's also the case that if we include things that aren't naturally boolean, in a conditional that automatically converts them to a boolean context. So for example, if we were to say x and y. Let me show you x again, just to remind you. So x and y, well, JavaScript evaluates that to the empty string, which isn't boolean, not by itself, but we can include these in an if statement. So if x and y, well, if both of these are true, it means that neither is empty. If it's false, then one of them must be possibly both. And because in fact at least one of the strings is not empty, we get the second branch, which is consistent with x &amp;&amp; y or x and y being false. You can see here, what's going on is that this is not a boolean value by itself. It's actually just the empty string. But in a boolean context, that's false and so we get the else branch, and so this is what gets evaluated. Finally, let's use this idea of a boolean context to rewrite our previous comparison with the x.length triple equal zero and same for y. So we did this. So that's the same as this. If the length is zero, that means that it's empty. So x.length triple equals zero is true, but the empty string is false. So bang false is true as well. So this is the same. Likewise, this here, we can replace it with bang y, else open curly brace. And as before, we get the second branch because although bang y is true, bang x is false and we have false and true is false. Evaluates the second branch and we get this.