Branching in JavaScript

In many cases you will need to decide in your script whether to execute some piece of code or some other piece, depending on some condition. This is exactly when branching constructs are used in programming. In JavaScript, there are two of them: if ... else and switch.

If and If ... Else Statements

The simplest way to decide whether to execute some code is to use the if statement. It is very simple:

if (condition) {

  // The code to be executed if the condition
  // evaluates to true

}

For example:

if (temp > 20) {
  document.write("I like when it's warm!")
}

If you want to execute one version of code if the condition is true and another version of code otherwise, use the if ... else statement:

if (condition) {
  // The code to be executed if the condition
  // evaluates to true

}
else {
  // The code to be executed if the condition
  // evaluates to false
}

As an example,

if ((temp > 20) && (temp < 30)) {
  document.write("I like it when it's warm! ")
}
else {
  document.write("No, this is not comfortable! ")
}

Finally, we can chain if ... else statements:

if (temp < 0) {
  document.write("It is freezing!")
}
else if (temp < 10) {
  document.write("It is cold")
}
else {
  document.write("It is warm enough")
}

The switch Statement

This statement allows us to literally switch execution of a script between different options depending on the value of a variable. Check this example out.

var x = 1;

switch (x) {
  case 1:
       document.write("The value is one.")
       break
  case 2:
      document.write("The value is two.")
       break
  case 3:
      document.write("The value is three.")
       break
  default:
      document.write("Some other value.")
}

The switch statement evaluates the value in its brackets (in our case, the variable x) and then compares the result with the value for each case entry. As soon as it finds a match, the code inside that case entry is executed. If no match is found, the code under the default entry is executed.

You see the break statement which terminates the code after each case entry. What is it for? Try to remove or comment out the break statements in the code shown above and then run it in your browser. This is what you’ll get:

The value is one. The value is two. The value is three. Some other
       value.

This means that if after choosing a case entry the execution doesn’t encounter the break statement, it just “falls through”, i.e. continues to execute the code of the next entry. In some cases this might be exactly what you want from your program. But if not – just use the break statements where needed.

When execution comes to such a break statement inside of switch construct, it just exits the whole switch block and continue to the next line of code after the switch block.

Interrupting a Loop

In some cases you might want to interrupt a loop before it terminates naturally, i.e. before the value of its condition changes to false. This can be achieved using one of two ways.

First, you can use the same break statement. If it is met inside the loop, the execution will just leave the loop and continue with the next line of code after it. Let’s see how this happens.

var i = 0;
while (i < 10) {
    if (i == 5) break
    document.write(i + " ")
    i++
}

Here is the result which you should see after running this code in your browser:

0 1 2 3 4

When the value of i is equal to 5, the break statement is executed. As a result, our while loop is left behind and since there is no more code in our simple script, it comes to its end.

But there is also another option we might choose: the continue statement. Modify the previous code like this:

var i = 0;

while (i < 10) {
    i++
    if (i == 5) continue
    document.write(i + " ")
}

And then run it in your browser. This is what you should see:

1 2 3 4 6 7 8 9 10

Can you figure out what is happening here? When the value of i was equal to 5, the continue statement was executed. As a result the execution of the code inside the loop was stopped, and 5 wasn’t printed out. However, the loop wasn’t terminated either, it just continued with the next iteration.