What is control flow?

Control flow is the order in which code is executed. Control flow in JavaScript generally runs from line 1 to the last line of code in order, however there are many statements that can affect the control flow and are a key part of programming.

If, Else, and Else If

One of the most basic and intuitive control flow statements is the if, else, and else if statements. These are used to prevent or allow blocks of code to be executed if a defined condition is met. Some if statements are accompanied by an else statement that will only execute if the condition of the accompanying if statement is not met. These if-else statements can be chained together to check for one of multiple conditions where only the first code block with a met condition will execute, by-passing all subsequent blocks in the else if chain. If statements without else statements can be chained together to check for multiple conditions where every condition that is met will run a code block.

if(condition_1){
  codeBlock;
}
else if(condition_2){
  codeBlock;
}
else{
  codeBlock;
}

The syntax for if else statements start with the word if followed by a condition in parentheses that will be evaluated to and type coerced to a boolean value. Following this is a block of code encapsulated by curly braces. Then the next condition is preceded by “else if” and then follows the same general syntax. The final else statement does not have a condition and just has a code block.

Switch

Similar to if else statements, switch case statements execute code blocks based on a defined condition, however switch case conditions all share a common condition whose value determine which code blocks are run. Like else if statements, switch cases can be used to execute mutually exclusive blocks of code by ending each block with the break statement. Unlike chained if statements, all code following the passing case will be run until a break statement is reached, regardless if the following cases are true.

switch(expression){
  case A:
    codeBlock;
    break;
  case B:
    codeBlock;
  case C:
    codeBlock;
    break;
  default:
    codeblock;
}

The syntax for switch statements starts with the word switch followed by an expression in parentheses. Inside a set of curly braces a set of case statements followed by a case expression to match against the switch expression precedes a block of code. In this example A is mutually exclusive from B and C but if the expression evaluates to B then both the B code block and C code block will be executed since the B code block does not have the break statement. At the end there is an optional default case that will run if the expression does not evaluate to A B or C.