• You can use if to branch to a block of statements that are executed only if the condition in the parentheses of if() equals true. This is also called a conditional branch.

• You can use else with a block of statements that will be executed only if the previously checked if condition was equal to false.

• else if can be used with a block of statements to test another condition if the preceding if was equal to false. After a preceding if, you can use multiple else if conditions. Alternatively, you can use switch() for such a multiple branch.

In your daily work, you’ll probably use conditional branching with if and the alternative else most often. Here’s the syntax of such an if-else construct:

if ( condition==true ) {
  // statements if condition is true
}
else {
  // statements if condition is false
} 

let age = prompt('How old are you: ');
if (age >= 18) {
    console.log("Access granted")
} else {
    console.log("Access denied");
} 

When you run the example, the prompt() method opens a dialog in the browser window with an input field and an OK and Cancel button. The value you enter here in the input field is returned by prompt() and assigned to the variable age in the example. The if statement then checks whether the value of the variable age is greater than or equal to 18. If this condition is true, a corresponding output will appear in the console. If the condition is false, the statement is executed in the alternate else branch.

At this point, I’d like to share a few words about the comparison operators === and !==. These are necessary because with comparison operators, an implicit type conversion is performed before the comparison so that these values can be compared. In the following example, a string is compared to an integer:

let strVal = "1234";   // number
let iVal = 1234;       // string
if (strVal == iVal) { // true because type conversion
    console.log("Both values are equal");
} else {
    console.log("Values are different")
} 

In this example, the comparison of "1234"==1234 returns true due to a type conversion. For such purposes, the operators === and !== are available, which compare not only the value but also the type. So, if you replace the == operator with the === operator in the example, true will no longer be returned because the value is the same but the type isn’t.

let val = condition ? value1 : value2; 

Here the value1 value is assigned to the variable val if condition is true. If condition is false, the value2 will be assigned to val. With regard to the if-else construct, this roughly corresponds to the following:

let val;
if (condition) {
  val = value1;
} else {
  val = value2;
} 

The else branch can be omitted if val is initialized with false at the beginning. However, this is also more about demonstrating the counterpart of the selection operator.

Here’s an example of the selection operator, where prompt() is used to query a pseudo password, and according to the input, true or false gets assigned to the isAdmin variable:

let pwd = prompt('Enter password: ');
let isAdmin = pwd == 12345678 ? true : false;
console.log(isAdmin); 

17.7.5    Logical Operators

Table 17.5     The Logical Operators in JavaScript

Here’s a simple example in which you’re again supposed to enter a value between 1 and 100 via the prompt of a prompt() dialog:

let val = prompt('Enter a value from 1 - 100: ');
if (val >= 1 && val <= 100) {
    console.log("The value matches the requirements.")
} else {
    console.log("Wrong input: " + val);
} 

Using the logical AND, the expressions of whether the entered value val is equal to or greater than 1 AND equal to or less than 100 have been linked here, and true will only be returned if both expressions are true.

If you had used the logical OR operator || instead, true would always be returned if the entered value is greater than or equal to 1 because the second expression wouldn’t have been checked at all. However, if the value is negative or 0, the OR operator in the example also evaluates the second expression. In the case of a link with the logical OR, the check aborts at the first true because the condition is that at least one link is true.

17.7.6    Multiple Branching via “switch”