JavaScript: Control Flow (if, else)

A JavaScript program is broken down into a number of statements, and each is run one at a time in the order they appear. Normally, you will see one statement per line and the code will perform each action from the top to the bottom of your script.

Consider the following code;

var a = "Hello";
var a = "Goodbye";
var a = 10;
console.log(a);         // 10

The above code consists of 3 statements, which will run in the order they appear.

1. In the first line we set the variable ‘a’ to be the word “Hello”.
2. On the next line, we overwrite the value of ‘a’ and set it to “Goodbye”. 3. On the third line we overwrite the variable again to be the number 10.
3. On the last line we print the value of a, which is currently 10.

After this the script is complete and execution stops.

Boolean Expressions

Boolean expressions are small code statements that the computer can evaluate to provide a ‘true’ or ‘false’ answer. The result of this expression can then be stored in a variable or used directly to determine whether the script should do something or not.

An example of a boolean expression might be “Is the variable ‘score’ greater than 100?”.

We form boolean expressions using “Comparison Operators”, which are used to compare two variables or values. If the condition is met, then the expression is true - otherwise it is false. Boolean expressions can never take any other value. Some comparison operators used to make boolean expressions are listed below;

Examples

var age = 20;
var height = 182.8;

var oldEnoughToVote = (age >= 18);
var oldEnoughToDrink = (age >= 21);
var canRideTheRollerCoaster = (height > 120);

console.log(oldEnoughToVote);           // true
console.log(oldEnoughToDrink);          // false
console.log(canRideTheRollerCoaster);   // true

If … else Statements

Naturally, you don’t usually want your program to do exactly the same thing every single time it runs. Most scripts or applications will look at certain inputs or conditions and then do something based on that input.

For instance, assume you have a text box on your website where the user can enter his email address to add it to your mailing list. When the user clicks a ‘submit’ button you might want to check that they have entered a valid email address. If they have - you can send that email address to your web-server but if they haven’t you might want to popup a warning asking them to check the address they entered.

The simpliest way to modify the list of statements that are executed is with an ‘if … else’ statement. This controls the path or the flow that you take running through the commands that make up your program.

Consider the following example;

var name = getNameFromPage();

if (name == "John") {
    statementA;     // If the name is exactly 'John' then we do this
} else {
    statementB;     // Otherwise, do something else
}

statementC;

In the above code, assume that the ‘name’ variable is set from a text box on the webpage. If the user has entered the name ‘John’ then the script will execute statementA and then statementC. If the user has entered any other name, the script will execute statementB and then statementC. It is not compulsory to have an “else” section.

You can also extend the if/else statement by adding a number of different alternative conditions. In the following example we provide a number of different branches depending on the age of the user. Note, we always match the first condition in the list of matches and never execute more than one option. If none of the conditions are met - only then do we run the final ‘else’ statement.

// Tell us what type of movies the user is allowed to watch based on their age.

var age = 16;

if (age >= 18) {
    console.log("Can watch 18+ movies.");
} else if (age >= 12) {
    console.log("Can watch PG movies.");
} else if (age >= 21) {
    console.log("This will never happen!");
} else {
    console.log("Can watch kids movies.");  
}

Boolean Operators

Sometimes you need to check more than one condition at a time. You could write a separate if statement on each line each inside one another to test each condition separately - but that would be ugly and laborious.

Instead, you can use ‘Boolean Operators’ to modify or combine boolean values. These only work on ‘true’, ‘false’ values and are very useful in determining whether if statements should run. There are three of these that are particularly handy…

Operator Precendence

When learning mathematics you were taught the order in which basic operations occur “Division & Multiplication before Addition & Subtraction”. Programming languages have dozens of operators and they all run in a specific order of precedence.

Remembering all of these is pretty tough and it’s only useful to know a few of the most common ones - even after many years of programming.

We won’t go into the details of these yet, but just be aware that it can mess up your expressions. If in doubt, use parenthesis liberally (I still do to make my code clear) as they force the computer to evaluate the expressions in the order dictated by the brackets.

var a = 10 * 2 – 4 / 2;
console.log(a);                     // ??

var b = (6 / 2) + (6 / 3);
console.log(b);                     // ??

var c = a > 10 && b < 10 || 10 > 6;
console.log(c);                     // ??

var d = ((a > 10) && (b < 10)) || (10 > 6);
console.log(d);                     // ??

// No harm in having too many parenthesis
// Can be very confusing if not enough!

Advanced Topic: Operator Precedence

If you want to read more about operator precedence, I would advise that you learn the order for the most common operators;

• Logical NOT
• Multiplication
• Division
• Remainder
• Addition
• Subtraction
• Less Than
• Greater Than
• Equality
• Inequality
• Logical AND
• Logical OR

You can read more about Operator Precedence Here