PFS! Computer Science

Boolean Expressions and Conditionals
10.0. Overview

In this session we'll take our first look at boolean expressions, statements which evaluate to true or false and form the foundation of conditional statements (if-else) and conditional loops (while).

10.1 Branching Structures

A branching structure is an element in a program that allows a decision to be made, depending on some condition: if something is true, perform these instructions.

10.2. The if statement

if statements

JavaScript's branching structure is the if statement. In its most basic form, it looks like this:

if ( Boolean condition )
{
    // code goes here
    .
    .
}
code that is not part of the if-statement;

A Boolean condition has a value that is true or false. If the condition is true, the statements in the curly braces { } will be executed, and then the statement following that block will be executed. If the condition is false, the 3 statements in curly braces are skipped, and only the statements following the block is executed.

10.2.1. Boolean expressions

Boolean expressions

Boolean expressions evaluate as "true" or "false".

The most common way to create a Boolean expression is to compare two values using a comparative operator like <, >, ===, or != (not equals).

let age = parseInt(prompt("Enter age: "));
if (age < 18)
{
    document.write("You're not old enough to vote.");
    document.write("Sorry!");
}

Here, the boolean expression age < 18 will evaluate as true if the value of age is less than 18, and because it's true, the two document.write statements will be executed. If age is 18 or more, however, that expression will evaluate to false, and nothing will happen.

Another way to create a boolean expression is simply by assigning a a boolean value true or false to a variable.

Examples:

  • user_age_greater_than_18 = false
  • item_found = true

The comparative operators include:

===means "is equal to"
!=means "is NOT equal to"
<means "is less than"
>means "is greater than
<=means "is less than or equal to"
>=means "is greater than or equal to"

10.2.2. Boolean expressions in branching statements

Let's take a look at how boolean expressions might be used in actual statements.

Predict the result

Examine each of these examples and predict what you think the output will be:

let name = prompt("Enter your name: ");
if (name === "Joe")
{
    document.write("This is a secret message that only Joe will see!"<br />");
}
document.write("Hi, " + name + "!");
let age = parseInt(prompt("Enter your age: "));
if (age >= 18)
{
    document.write("You're eligible to vote!<br />");
}
document.write(age + " years old is an awesome age to be!");

10.2.3. Additional if statements

There are additional forms of the if statement that often come in handy:

if-else statements

If you want to manage a 2-way condition (either do this, or that), use the if-else statement:

if ( Boolean condition )
{
    // code goes here
    // only executes if condition is true
}
else
{
    // code goes here
    // only executes if condition is false
}
// more code down here

Note that the if and else blocks are indented, which helps us visualize that they are the two different options in this part of the program.

We can now correctly analyze whether or not someone can be president with the following code:

let age = parseInt(prompt("Enter your age: ));
if (age < 35)
{
    document.write("Sorry!<br />");
    document.write("You're not old enough to be President of the U.S.<br />");
}
else
{
    document.write("Guess what?<br />");
    print("You are old enough to be President of the U.S.<br />");
}
document.write("Regardless, I hope you vote!");

Only one of the two blocks of code will be executed, depending on the value of the variable age. Regardless of which block is run, the voting statement at the bottom will always be executed.

Let's try writing a new program.

Try this

A restaurant serves breakfast and lunch until 4pm (1600 hours on a 24-hour time clock), at which time it starts serving dinner. Write a program that has the user enter a 24-hour time, and then indicates whether the restaurant is serving lunch or dinner at that time.

Show/hide solution

<script>
let theTime = parseInt(prompt("What time is it right now (enter time as hhmm in 24 hour clock): "));
if (theTime < 1600)
{
    document.write("The restaurant is serving lunch right now.");
}
else
{
    document.write("The restaurant is serving dinner right now.");
}
</script>

10.2.4. Even more if statements

Some problems require that there be more than a single option considered. For these cases, you basically have two possible ways two write the code:

  1. Organize your logical solution so that a series of if-else statements can be nested, allowing the program's logic to drill down to find the appropriate action, or
  2. if the actions can all be considered simultaneously, use an if-else-if... statement.

Let's try a simple exercise to put some of these pieces together:

Try this

A restaurant is open for breakfast until 1100 hours, for lunch until 1600 hours, and for dinner until 2300 hours. Write a program that has the user enter the time (in 24-hour form), and then prints out meal the restaurant is serving at that time. Include an additional print statement for each meal that recommends a beverage suitable for that meal. Regardless of the hour, print out the message "Thank you for choosing our restaurant."

2.0.4. Additional Boolean expressions

There are three more Boolean operators that one can use to create more complex Boolean expressions.

Boolean operators && (and), || (or), and ! (not)

<Boolean expression A> && <Boolean expression B>
is only true of both Boolean expressions A and B are True.

<Boolean expression A> || <Boolean expression B>
is true if either one of the Boolean expressions A and B are True.

! <Boolean expression A>
is only true of Boolean expression A is False.

Example:

if (age >= 13 && age <= 19)
{
    is_teenager = true;
}
else
{
    is_teenager = false
}