034.3 Lesson 1

The simplest control structure is given by the if instruction, which will execute the statement immediately after it if the specified condition is true. JavaScript considers conditions to be true if the evaluated value is non-zero. Anything inside the parenthesis after the if word (spaces are ignored) will be interpreted as a condition. In the following example, the literal number 1 is the condition:

The number 1 is explicitly written in this example condition, so it is treated as a constant value (it remains the same throughout the execution of the script) and it will always yield true when used as a conditional expression. The word true (without the double quotes) could also be used instead of 1, as it is also treated as a literal true value by the language. The console.log instruction prints its arguments in the browser’s console window.

Although syntactically correct, using constant expressions in conditions is not very useful. In an actual application, you’ll probably want to test the trueness of a variable:

The value assigned to the variable my_number (3) is non-zero, so it yields true. But this example is not common usage, because you rarely need to test whether a number equals zero. It is much more common to compare one value to another and test whether the result is true:

The double equal comparison operator is used because the single equal operator is already defined as the assignment operator. The value on each side of the operator is called an operand. The ordering of the operands does not matter and any expression that returns a value can be an operand. Here a list of other available comparison operators:

Usually, it does not matter whether the operand to the left of the operator is a string and the operand to the right is a number, as long as JavaScript is able to convert the expression to a meaningful comparison. So the string containing the character 1 will be treated as the number 1 when compared to a number variable. To make sure the expression yields true only if both operands are of the exact same type and value, the strict identity operator === should be used instead of ==. Likewise, the strict non-identity operator !== evaluates as true if the first operand is not of the exact same type and value as the second operator.

Optionally, the if control structure can execute an alternate statement when the expression evaluates as false:

The else instruction should immediately follow the if instruction. So far, we are executing only one statement when the condition is met. To execute more than one statement, you must enclose them in curly braces:

A group of one or more statements delimited by a pair of curly braces is known as a block statement. It is common to use block statements even when there is only one instruction to execute, in order to make the coding style consistent throughout the script. Moreover, JavaScript does not require the curly braces or any statements to be on separate lines, but to do so improves readability and makes code maintenance easier.

Control structures can be nested inside each other, but it is important not to mix up the opening and closing braces of each block statement:

The expressions evaluated by the if instruction can be more elaborate than simple comparisons. This is the case in the previous example, where the arithmetical expression my_number % 2 was employed inside the parentheses in the nested if. The % operator returns the remainder after dividing the number on its left by the number on its right. Arithmetical operators like % take precedence over comparison operators like ==, so the comparison will use the result of the arithmetical expression as its left operand.

In many situations, nested conditional structures can be combined into a single structure using logical operators. If we were interested only in positive even numbers, for example, a single if structure could be used:

The double ampersand operator && in the evaluated expression is the logical AND operator. It evaluates as true only if the expression to its left and the expression to its right evaluate as true. If you want to match numbers that are either positive or even, the || operator should be used instead, which stands for the OR logical operator:

In this example, only negative odd numbers will fail to match the criteria imposed by the composite expression. If you have the opposite intent, that is, to match only the negative odd numbers, add the logical NOT operator ! to the beginning of the expression:

Adding the parenthesis in the composite expression forces the expression enclosed by them to be evaluated first. Without these parentheses, the NOT operator would apply only to my_number > 0 and then the OR expression would be evaluated. The && and || operators are known as binary logical operators, because they require two operands. ! is known as a unary logical operator, because it requires only one operand.

Although the if structure is quite versatile and sufficient to control the flow of the program, the switch control structure may be more appropriate when results other than true or false need to be evaluated. For example, if we want to take a distinct action for each item chosen from a list, it will be necessary to write an if structure for each assessment:

In this example, an auxiliary variable found is used by all if structures to find out whether a match has occurred. In a case such as this one, the switch structure will perform the same task, but in a more succinct manner:

Each nested case is called a clause. When a clause matches the evaluated expression, it executes the statements following the colon until the break statement. The last clause does not need a break statement and is often used to set the default action when no other matches occur. As seen in the example, the auxiliary variable is not needed in the switch structure.

If more than one clause triggers the same action, you can combine two or more case conditions:

In previous examples, the if and switch structures were well suited for tasks that need to run only once after passing one or more conditional tests. However, there are situations when a task must execute repeatedly — in a so-called loop — as long as its conditional expression keeps testing as true. If you need to know whether a number is prime, for example, you will need to check whether dividing this number by any integer greater than 1 and lower than itself has a remainder equal to 0. If so, the number has an integer factor and it is not prime. (This is not a rigorous or efficient method to find prime numbers, but it works as a simple example.) Loop controls structures are more suitable for such cases, in particular the while statement:

The block statement following the while instruction will execute repeatedly as long as the condition factor < candidate is true. It will execute at least once, as long as we initialize the factor variable with a value lower than candidate. The if structure nested in the while structure will evaluate whether the remainder of candidate divided by factor is zero. If so, the candidate number is not prime and the loop can finish. The break statement will finish the loop and the execution will jump to the first instruction after the while block.

Note that the outcome of the condition used by the while statement must change at every loop, otherwise the block statement will loop “forever”. In the example, we increment the factor variable‒the next divisor we want to try‒and it guarantees the loop will end at some point.

This simple implementation of a prime number tester works as expected. However, we know that a number that is not divisible by two will not be divisible by any other even number. Therefore, we could just skip the even numbers by adding another if instruction:

The continue statement is similar to the break statement, but instead of finishing this iteration of the loop, it will ignore the rest of the loop’s block and start a new iteration. Note that the factor variable was modified before the continue statement, otherwise the loop would have the same outcome again in the next iteration. This example is too simple and skipping part of the loop will not really improve its performance, but skipping redundant instructions is very important when writing efficient applications.

Loops are so commonly used that they exist in many different variants. The for loop is specially suited to iterate through sequential values, because it lets us define the loop rules in a single line:

This example produces the exact same result as the previous while example, but its parenthetic expression includes three parts, separated by semicolons: the initialization (let factor = 2), the loop condition (factor < candidate), and the final expression to be evaluated at the end of each loop iteration (factor++). The continue and break statements also apply to for loops. The final expression in the parentheses (factor++) will be evaluated after the continue statement, so it should not be inside the block statement, otherwise it will be incremented two times before the next iteration.

JavaScript has special types of for loops to work with array-like objects. We could, for example, check an array of candidate variables instead of just one:

The for (candidate of candidates) statement assigns one element of the candidates array to the candidate variable and uses it in the block statement, repeating the process for every element in the array. You don’t need to declare candidate separately, because the for loop defines it. Finally, the same code from the previous example was nested in this new block statement, but this time testing each candidate in the array.