Conditionals

[00:00:00]
>> So let us go on now and talk about another thing we gonna need in order to make a page work, which we looked at very briefly earlier, which are conditionals. Now the Spice Girls song Wanna be has a turn of conditionals in it. For example, they sing, if you wanna be my lover, you gotta get with my friends.

[00:00:22]
There's sort of an implied then there. Sometimes we say, if you wanna be my love then you gotta get with my friends. And we wanna be able to talk to JavaScript the same way the Spice Girls talk to us, right? We wanna be able to tell JavaScript what happens under a certain condition.

[00:00:37]
So if statements are the way that we can tell JavaScript to only run code under a certain condition. So for example, maybe the spice girls wrote this code because in this if statement we have imagined some object you. And if you has a property called you WannaBeMyLover that is value of true.

[00:01:02]
If that is true, if whatever is in these parentheses after the F is true, we call that the condition. If that condition is true, then whatever is between the curly braces after that condition, JavaScript will run. So in this case the Spice Girl says if the property you.wannaBeMyLover on the object you is true.

[00:01:23]
Then the property gotta get with my friends on the object you is also going to be set to true. Okay, so this is how we would encode Spice Girls WannaBe in JavaScript, if we wanted to, which, of course I do. [LAUGH] So the idea is that the code inside those curly braces it's only gonna happen if the condition is true.

[00:01:47]
They didn't really specify what happens if you don't wanna be my lover, but, [LAUGH] we know that the only time that you got to get with my friends is if you do wanna be my lover. [LAUGH] So there is another option that we have if we want to say one thing or the other should happen depending on a condition.

[00:02:09]
We have an extra keyword we can add in there called else. So we can combine if block with else block, blocks are just the word for those chunks of code in the curly braces, we talked briefly about earlier. So in this case, does anybody know the line of the.

[00:02:29]
[LAUGH] Spice Girls song WannaBe that this is referring to? [LAUGH] So if you really bug me, then I'll say goodbye. If you don't really bug me, they didn't really specify what happens, but we could imagine that I'll say hello. And want to keep dating you I don't know, [LAUGH] so this is how we can do one thing if the condition is true and a different thing if the condition is false, okay?

[00:02:56]
It is going to allow us to make decisions in our code, basically. And sort of split, put a fork in the road in front of JavaScript and say, hey, JavaScript, take a moment, figure out if this condition is true. If it is go that way, if it's not go this other way.

[00:03:12]
So if the condition is true and else is if it's false, cool? Okay, so let's take a look at this one slightly less Poppi example. [LAUGH] What do you think is gonna happen when this code runs? So if five is greater than four console log greater than else console log less than.

[00:03:39]
I'm hearing greater than that's because we know numbers, we know how to count, thanks to Sesame Street, that five should be greater than four. So let's prove it to ourselves, let's go to our console and just run this and make sure yes, we get greater than. And if I were to, let's say, change this to a less than, we would expect less than.

[00:04:06]
So this is the idea, that we have the value of this expression in the parenthesis evaluated to a boolean. And depending on whether that boolean is true or false, whether the value of the expression in the parenthesis, the condition expression is true or false. So we're gonna decide which of the if block or the else block to do, cool, great.

[00:04:33]
Now if we wanna get real fancy, we can even chain most multiple else's and IFS together to have like multiple different conditions that might happen. So for example, here I have a little function that I'm declaring just to wrap this all up. This is called compare, and it's taking in two things x and y, we could assume their numbers.

[00:05:00]
And it is saying if x is greater than y, then log out a message to that effect. Else, so if x is not greater than y, then there are two possibilities, right? Either x is less than y or x is equal to y. So what we've got is another if here we have an else if we can chain them in this way.

[00:05:25]
So that essentially if this is false, then this whole if else, we're gonna jump into. And so now we're gonna have to look at another condition see if that's true. If so then we're gonna do that and if that's not true either then we're gonna fall into this final else.

[00:05:49]
Make sense? Cool, and we could prove it to ourselves if I go back to my console, declare this function. So now if I compare, yeah, three and two, what do you think is gonna happen?
>> X is greater.
>> We're gonna see that is greater than message. Yes, three is greater than two, great, okay?

[00:06:19]
And if I put in two and two, we should expect-
>> Equal.
>> Equal to because neither of those two conditions that we had in here, neither of them is true. X greater than y, not true, they're both two. Two is not greater than two. Also not sure that two is less than two, so that means we fall into the third.

[00:06:40]
How did it put a space between x and y? Great question, this is a fun little trick in console logging. Any guesses what's doing the spacing here in my console log statement? So let's take a look. So for example here, it logged three space the string is greater than, and then two.

[00:06:58]
And we can see because the three and two are different that it's logging the numbers themselves I didn't like turn them into strings or anything. Any guess what in this console log statement here is doing that spacing?
>> It's gotta be the comma.
>> Commas, yeah, so if I put commas in console log, this is another, a nice little feature of the fact that JavaScript doesn't care how many arguments you give things.

[00:07:21]
Is that I can just keep adding commas to pass in more and more arguments to console log and it will. I logged them all out on the same line with spaces, so fun little trick they're good eye.
>> Wouldn't work if you just did console log x is greater than y without the commas or would it break?

[00:07:40]
>> Let's find out. Console log, I'm gonna do just two string is greater than less has spaces in it is greater than one let's find out. Syntax error, no, it does not work, JavaScript says when it sees that space, it gets confused. It says, I don't know how to interpret that.

[00:08:05]
So, yeah, we need the commas, if we have multiple things. The other thing I could do is I could put them all in a string, like concatenate them all together into a single string, but why type more quotation marks than I need to do? As a lazy coder, I don't wanna do that self, calm as it is.

[00:08:27]
All right, great point, okay, so we said that the condition evaluates to a boolean value. So usually, we're gonna be passing in some kind of expression that evaluates like using one of our comparison operators. For example, we saw the lessons and the greater than we also have our triple equals a strict equality operator, for example.

[00:08:52]
So if we have some variable forecast, and the forecast is rain, then we'll say remind people to bring an umbrella, for example. What happens if we pass in some other value? Well, our good friend JavaScript with its loosey goosey type Venus is going to try to read that value as a boolean, it's going to convert that value.

[00:09:17]
Or we could say, cast that value to a boolean and this brings up the notion of truthiness. So when a value gets turned into a boolean, if it becomes true, we say that, that value is not the same thing as the boolean value true. It's a different type of thing, but it functions like the boolean value true, so we say it's truthy.

[00:09:43]
Or if it functions like false, we say it's falsey. So truthiness is something that JavaScript is gonna try to determine the truthiness of any kind of value that I pass in there. Or if I pass in an expression that evaluates to a value other than a boolean, like a string or something else, then JavaScript is gonna say all right is that value truthy or is it falsy?

[00:10:05]
And then it's going to make a decision accordingly, so for example, strings if they're non-empty if they have some characters inside of them, they're truthy. So JavaScript will run that console log line because I passed in a truthy value, we can prove it to ourselves. This line will run, it sure did, so what do you think is gonna happen here?

[00:10:36]
If I pass in the number zero, do you think we'll hear zero is truthy or zero is falsy?
>> Falsy.
>> Falsy, let's double check. Zero is indeed falsy. So yeah, this is maybe the truthiness is maybe the built in coalescing that we were asking about earlier.
>> Something exists, we'll treat it as whatever.

[00:11:00]
>> And it sort of depends. So it depends where in our program this value this string or number or whatever it is shows up. But when it's in the place of a condition in a conditional in an if statement, JavaScript is gonna look for truthiness. If we were using it elsewhere, like in a arithmetic operation, JavaScript doesn't really care about its truthiness.

[00:11:24]
It's gonna look at its numbness. So it depends kind of where this value shows up whether or not JavaScript is trying to make it a boolean, make sense? Okay, so be careful because sometimes you can be passing in what you thought was gonna be a boolean. And maybe you thought it was going to be false or something, but it turns out it's actually a string and so then it's truthy.

[00:11:47]
And so this can be a gotcha sometimes that trips us up as coders.