Conditionals, Using Boolean Expressions

In an imagined coin flipping situation you may you have

Example 3.1. Flip a Coin, Take 0
'use strict';

let tails = 0;
let heads = 0;
let flip;

flip = Math.random();
flip = Math.floor(flip * 2 + 1);
if (flip === 1)
    tails++;
else
    heads++;
...

In lines 3 and 4 I declare two variables and give them both zero as values. They will be used for tallying the number of heads and tails, respectively, that we get when flipping the coin multiple times. In line 5 I declare the variable flip which represents the coin. In line 7 I assign it a random value between 0 - .99999. Mathematically I give it a value in the range [0;1[ ie from 0 to 1 excluding 1.0.

To make that into heads and tails, in line 8, I multiply the outcome with 2, a coin has two sides, changing the result to be between 0 - 1.99999, then I add 1 to change the value from what it was to be between 1 - 2.99999. Using the standard function Math.floor I throw away any decimals giving me the result 1 or 2.

In line 9 I create a boolean expression, flip === 1, putting it into a conditional statement, if. If the boolean evaluates to true, codeline 10 is executed, otherwise codeline 12 is executed, and the program continues with whatever comes next. If nothing comes, it finishes. The construction

Example 3.2. Focus on a Conditional
if (flip === 1)
    tails++;
else
    heads++;

is called a conditional. There is nothing natural about choosing the value '1' to represent tails, and the value '2' consequently will be heads. This is the choice of the programmer.

Exercise: Did we have to add 1 to get the result set to 1 or 2? Could we skip adding anything, and the use 0 or 1 as values?

The formal name of a conditional is a selection because it selects which line(s) of code to be executed, and by doing that also precludes some other code from being executed.

Before elaborating on this, allow me a brief digression about lines 10 and 12. The statement tails++ may seem odd to you. If you need to add 1 to a variable there are three ways of doing it:

var count = 0;
count = count + 1;      // execute right hand side, then assign
document.write(count);     // verify
count++;        // increment count
document.write(count);
++count;        // increment count
document.write(count);

Back to the subject matter. In an if statement the else part is optional. You code it if you need it. Above we saw

if (flip === 1)
    tails++;
else
    heads++;

counting heads or tails If we for some reason only need to count tails, the code would be

if (flip === 1)
    tails++;

The former option allows doing one or the other statement. The latter option allows doing something or nothing.

A more important comment. Let us assume that for each flip of the coin, we must not only tally the outcome, but also write it on the console, the code would need to be

if (flip === 1) {
    tails++;
    document.write('tails');
} else {
    heads++;
    document.write('heads');
}

The point being that if you need to execute more than one statement in block, then the statements must be enclosed by braces, { ... }. Some style guides encourage use of braces also if there's but one statement.

Conditional statements may be nested if necessary. Let us assume that logging the outcomes on the console is only neccessary in a debugging situation, then our code might be:

Example 3.3. Example with Nested ifs

var flip = 1;
var debug = true;
var heads = 0;
var tails = 0;

if (flip === 1) {
    tails++;
    if (debug) {
        document.write('tails' + tails);
    }
} else {
    heads++;
    if (debug) {
        document.write('heads' + heads);
    }
}

Example 3.4. Complex Conditional, Leap Year

You have worked on solving how to make a program decide whether a year is a leap year. Leap years are discussed in https://en.wikipedia.org/wiki/Leap_year.

In another section of the above article on Wikipedia, the algorithm for a leap year is outlined as:

/*
if (year is not divisible by 4) then (it is a common year)
else if (year is not divisible by 100) then (it is a leap year)
else if (year is not divisible by 400) then (it is a common year)
else (it is a leap year)
*/

The pseudocode above allows for direct coding as follows. For easy testing it is wrapped into an HTML5 page

<xi:include></xi:include>

Click here!


Example 3.5. Switch

Switch is applicable to testing one variable for several possible values.

<xi:include></xi:include>

Click here!


Example 3.6. Ternary Operator

The ternary operator er the only operation with three operands. An example was given in the switch example line 13. That as well as the following sample applies to checking whether a value was given, and if not a default is supplied.

'use strict';
let greeting = function (person) {
    let name = person ? person.name : `stranger`
    return `Howdy, ${name}`
}

console.log(greeting({name: `Alice`}));  // "Howdy, Alice"
console.log(greeting(null));             // "Howdy, stranger"

Example 3.7. On-Off
<xi:include></xi:include>

Click here! Line 11 does the magic.