Lecture 4 – JavaScript Conditional Statements

Sometimes, it becomes necessary to select one out of many different options. The conditional statements help the program perform right actions and make correct decisions. As the name suggests, these statements consider different conditions while performing certain actions.

There are three type of conditional statements in JavaScript.

  • The if statement
  • The if..else statement
  • The if..else if statement

The if Statement

You will use if statement which is also the fundamental conditional statement to conditionally execute statements and make decisions. Take a look at its syntax.

if (expression) {
   Executes the statement if the expression is true
}
<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
        <body onload = varscope();>   
                
                    
                       var age = 41;
                    
                       if( age > 40 ) {
                          document.write("The candidate is overaged.");
                       }
                           
</body>

</html>

The above code will produce the following result.

The if..else Statement

The if..else statement offers more control to JavaScript when it comes to executing conditional statements. It has the following syntax.

 if (expression) {
   Executes the statement if the expression is true
} else {
   Executes the statement if the expression is true
}

Once again, JavaScript will evaluate the expression and execute the “if statement” if it is true. However, it will execute the statement in the “else” section in case the if statement is false. Take a look at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
        <body onload = varscope();>   
                
                    
                       var age = 41;
                    
                       if( age The candidate qualifies for the job.");
                       }
                    else {
                        document.write("The candidate is overaged.");
                    }
                           
             </body>

</html>

Here is the output of the above code.

if…else if Statement

if.. else if statement enables JavaScript to consider more than 2 conditions before making a decision or executing a statement. This particular conditional statement has the following syntax.

if (expression 1) {
   if expression 1 is true, execute these statement(s)
} else if (expression 2) {
    if expression 2 is true, execute these statement(s)
} else if (expression 3) {
    if expression 3 is true, execute these statement(s)
} else {
    if no expression is true, execute these statement(s)
}

Although it seems very daunting, the if..else if statement is very simple to understand. It contains a series of if statements. Each if statement is actually the part of the previous else statement. If none of the conditions in if statements are true, JavaScript will execute statement in else section of the code.

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
        <body onload = varscope();>   
                
                    
                       var country = "United States";
                       if (country == "United Kingdom") {
                           document.write('The country is United States');
                       }
                       else if (country == "Germany"){
                           document.write('The country is United States');
                       }
                       else if (country == "France") {
                        document.write('The country is United States');
                       }
                       else if (country == "United States") {
                        document.write('The country is United States');
                       }

                       else {
                        document.write('Unknown Country');
                       }
                   
                           
</body>

</html>

Here is the output of the above code.

In the next lecture, we will discuss JavaScript Switch Statement.