Conditional Statements in JavaScript

Ever wonder how a computer program or game makes decisions? Or allows the User to make decisions on what happens next? There are several ways in which we as developers can control the flow or execution of a program, today we are going to continue with some basics… Conditional Statements.

A conditional statement is a decision statement. When the condition provided between the ( ) parentheses evaluates to true, the code within the { } block is run. If the condition evaluates to false, the code block is skipped and the code following the if…else statement continues execution. Let's take a look at how this is put together in code.

Syntax for an if statement:

 if(expression_is_true) {
      // if expression evaluates to TRUE run this block of code 
 }

  // if expression evaluates to FALSE run the code after the block { }

This way we can start programming our code to make decisions based on a condition or variable value. Let’s say we want to check if a user is logged in to our application, if they are authorized then we want to run the code that allows them to access protected parts of the application. If they are NOT authorized, then we send them to a page where they can register or login.

 if(User.isAuthorized()) {
      // Send User to protected routes/views/pages …
 }

  // Send User to register route/view/page …

We can also add decision options by adding the else part to our if…else statement. In the code above we were running code only if the expression provided is TRUE, if it is FALSE then we skip that code and continue on with the rest of the program code below the if block. With an if/else statement either the statement will evaluate to TRUE and the first block of code will run and the code in the else statement will be skipped. Or the condition will evaluate to FALSE and the code in the if block will be skipped and the code in the else block will run.

Syntax for an if/else statement:

 if(expression_is_true) {
      // if expression evaluates to TRUE run this block of code 
 } else {
      // if expression evaluates to FALSE run the code in this block
 }

 if( User.isAuthorized() ) {
      // Send User to protected routes/views/pages …
 } else {
  // Send User to register route/view/page …
 }
  // continue program execution …

We can extend our decision options further by adding the else if part to our if…else statement. It pretty much works how you think it would. If the first expression provided is TRUE, we run the code in the first block. If it is FALSE, then we skip that code and evaluate the next expression provided by the else if statement. If this second expression evaluates to TRUE, the program runs that code block. If both of the expressions are FALSE, then we run the code in the final else block. The else if statement allows the developer to test multiple conditions and only run code specific to that evaluation.

Syntax for an if/else if statement:

 if(expression) {
      // if expression evaluates to TRUE run this block of code 
 } else if(expression) {
      // if first expression is FALSE but the NEW expression is TRUE run this code
 } else {
      // if BOTH expressions evaluate to FALSE run the code in this block
 }

For a few conditions using the else if syntax is alright, but if you have a number of valid options that you want to test or evaluate. Then a switch statement might better serve the function or logic.

Syntax for a switch statement:

 switch(expression): {
    case_1(value):
        // code block for case_1 selection
        break;
    case_2(value):
        // code block for case_2 selection
        break;
    case_N(value):
        // code block for case_N selection
        break;
    default:
        // code block if no cases match the expression being evaluated
}

Let’s run through what is happening in this new code. We use the new switch keyword followed by the expression we want to be evaluated. The switch statement contains case statements. The case statement has a value associated. If the expression being evaluated is equal to the value of the case statement, then we run the code within the associated block. The break statement, which follows each case block, ends execution of the switch code block and continues running the code following the switch statement. A switch statement can contain as many case(value): statements as is needed. If none of the case statements match the evaluation of the expression, then the default case runs, and the switch statement completes execution.

Syntax for a switch statement with multiple cases:

 switch(expression): {
    case_1(value):
    case_2(value):
        // code block for case_1 or case_2 selection
        break;
    case_3(value):
    case_4(value):
        // code block for case_3 or case_4 selection
        break;
    default:
        // code block if no cases match the expression being evaluated
}

You can also nest if…else statements within other functions or if / else statements. Even with something simple like conditional statements we can program our applications to have very simple or very specific decision-making ability.

Syntax for a nested if statement:

 if(outer_expression) {
      // if expression evaluates to TRUE run this block of code 
      if(nested_expression) {
           // if nested_expression evaluates to TRUE run this block of code 
      } else {
           // if nested_expression evaluates to FALSE run the code in this block
      }
 } else {
      // if outer_expression evaluates to FALSE run the code in this block
 }

Hopefully this article on conditional statements in JavaScript was useful to you. Thanks for reading, until next time!