Conditional Statements in JavaScript

Continuing from my blog post last week about comparison and logical operators, I wanted to build on that and talk about conditional statements this week. Conditional statements can control the flow of execution of your code. In doing so, they act as gatekeepers to some blocks of code that you want execute when certain conditions are met. Conditional statements use the comparison and logical operators to evaluate a condition and return a true or false value based on the evaluation. I have listed the three conditional statements below.

//if statement
if(//conditional){
    /**executed code if conditional is true**/
}
//continue with code


//if with else statement 
if(//conditional){
    /**executed code if conditional is true**/
}else{
    /**executed code if conditional is false**/
}

//if with else if statement
if(//conditional){
    /**executed code if conditional is true**/
}else if(//conditional){
    /**executed code if first conditional is false and else if conditional is true*//
}

The easiest way to think of how the logic of the conditional if statement works, is to think of it as a statement you may make with your friend. Maybe they ask if you want to grab lunch at 12 PM. You tell them you will be able to make it if you are able to finish some work you are behind on by 10 AM. The conditional being evalutated is if you are able to finish your work by 10 AM. If you are able to finish your work, the condition will be true and you will be able to go to lunch with your friend. If you are not able to finish your work, the condition will be false and you will not be able to go to lunch with your friend and have to continue working. I have included an example below of an if conditional statement showing the logic.

let x = 10
let message = ""

if(x<15){
    message = "x is smaller"
}

With the above example you can see that the condition is true and so the message variable was set to the string of "x is smaller". If the condition was false the browser would have skipped the rest of the conditional statement and would have carried on executing the next block of code. The condition being false now brings us to the second conditional statement of if else.

In the friend example in the second paragraph, you could give them a second option instead of telling them you won't be able to make it to lunch if you do not finish your work. You can say you will meet them for lunch if you finish your work, or else you will meet them for dinner. The if else statment works the same way, and I will expand on the JS example above showing that.

let x = 10
let message = ""

if(x<5){
    message = "x is smaller"
}else{
    message = "x is larger"
}

In this example the first condition fails and so message is set to the second string. After that the browser will continue to execute the next block of code. Now maybe you want to check another condition and do something else if the first condition fails or is false.

From the friend example, maybe you want to check with them to see if they are free for dinner first before telling them you'll go to dinner if you cannot make it to lunch. You say you will meet them for lunch if you finish your work or else, if they are free you will meet them for dinner. An example of that using our JS example is below using the else if statement.

let x = 10
let message = ""

if(x<9){
    message = "x is not 10"
}else if(x<11){
    message = "x is 10"
}

A cool feature of the else if statement is that you can chain multiple else if statements together to check multiple conditional statements for different executions. The only issue with that, is it can tend to hurt the readability of your code. If you want to chain multiple else if statements together I would suggest to look into the switch statement. It has the same functionality but keeps your code cleaner and easy to read.