4.1 If..else

In the last section you learned about expressions and operators, in this section we will use these expressions and operators along with conditional statements to implement interactivity in our applications. In JavaScript we have two types of conditional statements, we have if and else, switch and case. In this video you will learn about if and else and we will see switch case in the next lesson. So imagine in our application that we are going to get the current time based on its value. We will greet the user with a different message. If the time is between 6am and 12pm, then we'll display something like Hello. If the time is between 12 and 6 pm, then we'll say good afternoon. Otherwise we display Good evening. We want to have a logic like this in our application. This is where we use if and else, so we start with the if. We add parentheses and between these parentheses we add a condition. If this condition takes the value true, the statement we put after it will be executed. Now if you have multiple statements, we have to put them between these braces, so this is a block of code. Optionally, we can have another condition, so we do an else if, in brackets (otherCondition) if this condition is true, then this other statement will be executed and likewise if we have multiple statements, we have to enclose them in braces like this. Now we could have yet another condition like this new condition. We could have as many conditions as we want, there are no limitations and again here we have one or more statements, if now none of these conditions are evaluated as true, we could use others to execute one or more other statements. So this is the basic structure, we want to get this logic and map it into this structure, it's very easy. So let's start with our first condition, if the time is between 6:00 and 12:00, that's the condition, and the instruction we want to execute is Hello. So I'm going to declare a variable here that we're going to call time and set it to 10, so we want to compare the time with these two numbers, for simplicity let's go with a 24 hour format so we want to see if the time is greater than or equal to 6 and the time is less than 12. You learned that in the last section, so here we use these comparison operators. We have two expressions, here's the first one and here's the second one and we apply logic between them. If these two expressions are true, the result of this expression will also be true. We make a console.log of Bonjour and of course we have to end this statement with a ";". Now if you want to master JavaScript, pause the video and continue implementing this logic using if and else. Then come back and continue watching the fix. So here's a second condition, you want to check if the time is between 12pm and 6pm, so it's very simple. If the time is greater than or equal to 12 and less than 18 we want to display good afternoon. So we make a console log of good afternoon. In this example we don't need an else if because as the statement tells us otherwise we display Good evening, so we delete this and with else we make a console log of good evening. In this example, because we are dealing with a single statement, these braces generate and create space in the code so it is better to get rid of them and simplify the code. We save the changes and we get hello. If I change the time to 1pm we get good afternoon and if I change to 8pm we get good evening. That's it for this demonstration on conditional if and else statements, let's meet again for the next demo where you will learn more about switch and case.