JavaScript Decision Making

In JavaScript decision making can be carried out in one of two ways, 'if' statements and 'switch' statements. Either of these options will allow a decision to be made between two or more options.

'if' Statements

In its simplest form, an 'if' statement can execute program code if a statement evaluates to true, using the following syntax:

if (expression)
{
   /* Statement(s) will execute if the expression is true */
}

The following example checks whether the values of two variables are the same and displays a message if they are.

var a = 10,
b = 10;
if (a == b)
{
   document.write("a is equal to b");
}

Adding an 'else' statement can execute other program code if the expression does not evaluate to true.

if (expression)
{
   /* Statement(s) will execute if the expression is true. */
}
else
{
   /* Statement(s) will execute if the expression is false */
}

This example adds an ‘else’ statement to the one above to output a message if ‘a’ and ‘b’ are not equal.

var a = 10,
b = 10;
if (a == b)
{
   document.write("a is equal to b");
}
else
{
   document.write("a is not equal to b");
}

If there are more than two options in a decision, then this can be further extended by the use of 'else if'.

if (expression)
{
   /* Statement(s) will execute if the expression is true. */
}
else if (expression)
{
   /* Statement(s) will execute if the first expression is false 
   but the second expression is true. */
}
else
{
   /* Statement(s) will execute if both the expressions are false */
}

Again, the above example, that compares the variables ‘a’ and ‘b’ can be extended to check if they are equal, then check if ‘a’ is greater than ‘b’ and if neither of the conditions are true, output a third message.

var a = 10,
b = 10;
if (a == b)
{
   document.write("a is equal to b");
}
else if (a > b)
{
   document.write("a is greater than b");
}
else
{
   document.write("a is less than b");
}

It is also possible to nest one 'if' statement inside another.

if (expression)
{
   /* Statement(s) will execute if the expression is true */
   if (expression)
   {
      /* Statement(s) will execute if the expression is true */
   }
}

The Ternary Operator

The ternary operator provides a means to write an 'if' statement in shorthand form.

expression ? true : false

The expression can be the same as in a normal 'if' statement. If it evaluates to true then the code after the question mark gets executed, otherwise the code after the colon gets executed.

The following example produces the same results as the 'if-else' statement above. Here the ternary operator is used as part of a 'document.write' statement, to incorporate 'equal to' or 'not equal to', into a message, depending on whether the variables are equal or not.

var a = 10,
b = 10;
document.write("a is " + (a == b ? "equal to" : "not equal to") + " b");

'switch' Statements

Where there are more than two options in a decision, a 'switch' statement can be more efficient than using multiple 'elseif' statements.

switch (expression) {
   case expression-result-option1 :
      // statement(s) to execute.
      break;
   case expression-result-option2 :
      // Statement(s) to execute.
      break;
   case expression-result-option3 :
      // Statement(s) to execute.
      break;
   default :
      // Statement(s) to execute.
}

A simple example of a 'switch' statement would be to display a message on screen depending on the value of a variable.

var a = 3;
switch (a) {
   case 1 :
      document.write("a equals 1");
      break;
   case 2 :
      document.write("a equals 2");
      break;
   case 3 :
      document.write("a equals 3");
      break;
   default :
      document.write("a is not equal to 1, 2 or 3");
}

A 'switch' statement can have any number of options. When the 'break' statement is reached, the flow of control jumps to the statement following the end of the 'switch'. The final 'default' statement is a catch all if none of the other options evaluate to true and is optional.