Selection

Section 1: Introduction

Selection is implemented in one of three ways:

if structure (single selection)
if/else structure (double selection)
switch structure (multiple selection)

The if structure is called a single-selection structure because it selects or ignores a single action.

The if selection structure either performs (selects) an action if a condition is true or skips the action if the condition is false.

The if/else structure is called a double-selection structure because it selects between two different actions.

The if/else selection structure performs an action if a condition is true and performs a different action if the condition is false.

The switch selection structure is a multiple-selection structure.

Section 2: if Selection Structure

A selection structure is used to choose among alternative courses of action.

Example: The pseudocode statement

If student's grade is greater than or equal to 60
Display "Passed"

determines if the condition "student's grade is greater than or equal to 60" is true or false.

If the condition is true, then "Passed" is displayed, and the subsequent statement is performed.
If the condition is false, the display statement is ignored, and the next pseudocode statement in order is performed.

See an animated demo of an If statement with a True condition.

See an animated demo of an If statement with a False condition.

The preceding pseudocode if statement may be written in JavaScript as

if (grade >= 60) alert( "Passed");

if (grade >= 60)
{
alert( "Passed");
}

Note #1: You MUST enclose the condition in parenthesis in JavaScript!

Note #2: If your condition includes multiple conditions, each condition must be enclosed in parenthesis, with another set of parentheses surrounding the overall condition.

The if selection structure, when written on a single line, normally expects only one statement in its body.

To include several statements in the body of an if, enclose the statements inside curly brackets.
A control structure's multiple statement body is often called a block.
Multiple-line if or if/else statements must be enclosed in curly brackets.

Example:

if (grade >= 60)
{
alert( "Passed");
numPassed = numPassed + 1;
}

The figure below illustrates the single-selection if structure.

NOTE: If you mistype the keyword if and make it title case as in If, you may get an odd error like "object expected".

Section 3: if/else Selection Structure

The if/else selection structure allows the programmer to specify that a different action is to be performed when the condition is true than when the condition is false.

Example: The pseudocode statement

If student's grade is greater than or equal to 60
Display "Passed"
Else
Display "Failed"

displays "Passed" if the student's grade is greater than or equal to 60 and displays "Failed" if the student's grade is less than 60.

In either case, after the message is displayed, control passes to the statement following the if/else.

Note that the body statements of selection structures are indented.

The preceding pseudocode if/else structure may be written in JavaScript as

if (grade >= 60)
{
alert( "Passed");
}
else
{
alert( "Failed");
}

Note that each if or if/else spanning multiple lines must be enclosed in curly brackets.

The last } always matches up with the previous {.

The following figure shows the if/else selection structure.

See an animated demo of an if/else statement with a True condition.

See an animated demo of an if/else statement with a False condition.

Here is a great example of an if/else in action: MPH to KPH Converter w/Functions

Look particularly at the performConversion function.

Section 4: Nested ifs

Nested if/else structures test for multiple cases by placing if/else structures inside if/else structures.

Example:

If student's grade is greater than or equal to 90
Display "A"
Else
If student's grade is greater than or equal to 80
Display "B"
Else
If student's grade is greater than or equal to 70
Display "C"
Else
If student's grade is greater than or equal to 60
Display "D"
Else
Display "F"

if (grade >= 90)
{
alert("A");
}
else
{
if (grade >= 80)
{
alert("B");
}
else
{
if (grade >= 70)
{
alert("C");
}
else
{
if (grade >= 60)
{
alert("D");
}
else
{
alert("F");
}
}
}
}

If grade is greater than or equal to 90, the first four conditions will be true, but only the statement after the first test will be executed.

After the alert statement is executed, the else-part of the "outer" if/else statement is skipped, in fact skipping the entire remainder of the preceding code segment.

The preceding if/else structure can also be written as follows:

if (grade >= 90)
{
alert("A");
}
else if (grade >= 80)
{
alert("B");
}
else if (grade >= 70)
{
alert("C");
}
else if (grade >= 60)
{
alert("D");
}
else
{
alert("F");
}

Both forms are equivalent.

Look at the Unit Converter w/Functions for an example of a nested if/else.

Pay particular attention to the performConversion function.

Section 5: switch Multiple-Selection Structure

See an animated demo of a Switch statement.

The syntax of the switch is as follows:

switch (expression)
{
case label_1:
//statements
break;
case label_2:
//statements
break;
case label_N:
//statements
break;
default:
//statements
}

The first thing a switch statement does is evaluate the expression contained within its parentheses to a single value.

It then works its way down through the case statements checking if the value returned by the expression in parentheses after the switch keyword is matched by any of the values that follow the case keywords.
If it finds a match, then it evaluates all the following statements that belong to that case statement.
- The expression specified after switch will be compared sequentially with each case until either a match occurs or the } is encountered.
- Execution of a particular case statement causes program control to proceed with the first statement after the switch structure if a break is included.
- Otherwise all subsequent cases will be executed.
- The case labels in JavaScript can be any type.
- The switch statement is the only situation in which a break statement should be used in JavaScript.

The default statement is the optional default case that is executed when a match has not occurred for any previous case.

If used, the default is always specified after the other cases.

The required } terminates the switch structure.

Section 6: switch Types

The switch statement can be used with all variable types:

//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date();
var theDay=d.getDay();

switch (theDay)
{
case 5:
alert("Finally Friday");
break;
case 6:
alert("Super Saturday");
break;
case 0:
alert("Sublime Sunday");
break;
default:
alert("I'm looking forward to this weekend!");
}

var schoolColor ="burnt orange";

switch (schoolColor)
{
case "crimson":
alert("Roll Tide!");
break;
case "burnt orange":
alert("Hook 'em Horns!");
break;
case "maroon":
alert("Gag 'em Aggies!");
break;
case "blue":
alert("Go Blue!");
break;
case "gold":
case "purple":
alert("Geaux Tigers!");
break;
default:
alert("Sorry, I don't know that team cheer for " + schoolColor + ".");
}

Here is a demo of the examples above, including the same logic implemented using if/else statements.

You cannot easily implement the grade example shown earlier using a switch structure. Here are the unsatisfactory options:

//In this version you have to list all passing scores! Tedious!
switch (grade)
{
case 90: case 91: case 92: case 93: case 94: case 95:
case 96: case 97: case 98: case 99: case 100:
alert("A");
break;
case 80: case 81: case 82: case 83: case 84:
case 85: case 86: case 87: case 88: case 89:
alert("B");
break;
case 70: case 71: case 72: case 73: case 74:
case 75: case 76: case 77: case 78: case 79:
alert("C");
break;
case 60: case 61: case 62: case 63: case 64:
case 65: case 66: case 67: case 68: case 69:
alert("D");
break;
default:
alert("F");
}

//This version "breaks" the switch by "jamming" it open, or true. Blatant cheating!
switch (true)
{
case (grade >= 90)
alert("A");
break;
case (grade >= 80)
alert("B");
break;
case (grade >= 70)
alert("C");
break;
case (grade >= 60)
alert("D");
break;
default:
alert("F");
}

Avoid using the second approach. Use a nested if/else structure instead.

The example that we looked at earlier also contains a switch statement.

Look in particular at the selectConversion function.

Section 7: Conditional Operator

The conditional operator is the only JavaScript operator that takes three operands.

This operator is frequently used as a shortcut for the if statement.

The conditional operator is closely related to the if/else structure.

The three operands include the following:
1. the condition
2. the value returned when the condition is true
3. the value returned when the condition is false

The conditional operator, in effect, allows you to embed the equivalent of an if/else statement inside another statement.

Example:

alert ("The student " + (grade1 >= 60 ? "passed" : "failed"));

The above example is equivalent to the following code:

if (grade1 >= 60)
{
alert("The student passed");
}
else
{
alert("The student failed");
}

Section 1: Introduction

Section 2: if Selection Structure

Section 3: if/else Selection Structure

Section 4: Nested ifs

Section 5: switch Multiple-Selection Structure

Section 6: switch Types

Section 7: Conditional Operator

Section 8: Resources