4.1 Conditionals

Hi folks, in this lesson we're going to start looking at how we can work with JavaScript to control the execution flow of our programs. In this lesson we'll focus on using the conditional if statement. Other lessons in this section will cover additional control structures. The if statement is known as a conditional statement, because it only executes certain statements based on the results of an expression. First of all let's look at how it is structured syntactically. In its most Its basic form, the statement begins with the reserved word, if followed by parentheses that contain the conditional expression. Followed by a block, which is denoted by opening and closing curly brackets. So if we run this in a browser now, we should see the console.log in the browser's console, because 1 + 1 is equal to 2. If we go back and change the condition, This time we shouldn't see the log statement in the browser. And we can see that we don't. So the condition to evaluate is within parentheses. Generally, we don't put entire expressions into the parenthesis. We would normally compare a single value, like a variable. Each if, or the corresponding else is known as a branch. And the statements within the curly braces are known as a block. We can add multiple branches by combining the if statement with an else statement. So we shouldn't see the first log, because true is not equal to false, but we will see the second. In this example, we can only really have two branches. But if we’re comparing different kinds of values, we can have as many else branches as we need. So we start out by comparing the color variable with the string blue. And if that expression resolves to true, we'll note this string blue to the console. We then combine the else and if keywords. This time we compare the color variable to the string green. And if that is true, we log the string greens to the console. We then have a final else branch, which basically means that if the first two conditions are not met, then do this branch instead. And I would just log the color variable to the console. So in this case we should see the string red in the console. So we can add as many else-if branches as we need to. But we should really only have one else, even if we have multiple else-if expression. It's not essential that we provide a plain else at the end of the if statement. But we probably will in many cases. One point to note is that any truthy value will cause a branch to execute, not just the boolean value of true. So in this case, the value one is a truthy value. And what truthy means is that in a conditional expression such as an if statement, the value resolves to true, even though it isn't actually the boolean true. This can be very useful. For example, if we want to check that an array contains at least one item before we try to use that array, we can check that it has a length property. So here we define an array that has a single value, which is the string yes. The value that the array contains is not important. It's just important that it contains a value. So when an array contains values, it has a positive value for it's length property. So in this case the length would be one because the array contains 1 value. 1 is a truthy value, so we should see the console log array has length. If change the arrays, so that it doesn't contain any items. The reason why we don't see the console log Is because the length of the array is now zero and zero is falsie not truthy. There is one more type of conditional in addition to the if statement, and that is the ternery statement. This type of condition though, is much more tallest than a standard if else statement. But it's basically, a short cut for a conditional that contains a single if, and a single else. The ternary operator is a special operator that takes three operands. Let's look at the syntax. So the different operands in a turnery are as follows. We have a conditional. That is usually surrounded by parentheses. Although these parenthesis are not mandatory, it does improve readability if you include them. We then use the ternary operator, which is the question mark symbol. This is followed by the truthy operand, in this case a console.log statement. And lastly we have the falsie operand. And that is separated from the truthy operand using a colon. So in this case, because true evaluates to true in the conditional parts of the turnery right at the start of the expression, we should see the first console log. But if we change the conditional so that it evaluates to false, or a false value by changing it to the value false in this example in this case we should see the third operand the falsie operand. So in this lesson we looked at the conditional control structure if along with its else and if else permutations. We learned that any truthy expression will cause the if block to execute. But falsey values will not cause the if block to execute. We also looked at a ternary operator, which is like a shorthand version of a standard two-branch if else statement. In the next lesson, we're going to look at the switch statement. Thanks for watching.