Conditional Judgement ​

JavaScript uses if () { ... } else { ... } for conditional judgement. For example, to display different content based on age, you can implement it with an if statement as follows:

let age = 20;
if (age >= 18) { // If age >= 18 is true, execute the if statement block
    console.log('adult');
} else { // Otherwise, execute the else statement block
    console.log('teenager');
}

The else statement is optional. If the if statement block contains only one statement, you can omit the {}:

let age = 20;
if (age >= 18)
    console.log('adult');
else
    console.log('teenager');

The danger of omitting {} is that if you later want to add some statements but forget to write {}, it changes the semantics of if...else..., for example:

let age = 20;
if (age >= 18)
    console.log('adult');
else
    console.log('age < 18'); // Adding a line of log
    console.log('teenager'); // <- This line is no longer under else's control

The else clause in the above code actually only executes console.log('age < 18');, while the original console.log('teenager'); is no longer under the control of if...else..., and it will execute every time.

In contrast, statements with {} won't cause errors:

let age = 20;
if (age >= 18) {
    console.log('adult');
} else {
    console.log('age < 18');
    console.log('teenager');
}

This is why we recommend always using {}.

Multi-line Conditional Judgement ​

If you want to judge conditions more carefully, you can use multiple combinations of if...else...:

let age = 3;
if (age >= 18) {
    console.log('adult');
} else if (age >= 6) {
    console.log('teenager');
} else {
    console.log('kid');
}

The combination of multiple if...else... is actually equivalent to two layers of if...else...:

let age = 3;
if (age >= 18) {
    console.log('adult');
} else {
    if (age >= 6) {
        console.log('teenager');
    } else {
        console.log('kid');
    }
}

However, we usually write else if together for readability. It's acceptable to omit {} here because it contains only one if statement. Note that the last standalone else should not omit {}.

Please note that the execution characteristic of if...else... statements is binary; in multiple if...else... statements, if one condition holds true, subsequent conditions will not be evaluated.

Try to explain why the following code displays "teenager":

'use strict';
let age = 20;

if (age >= 6) {
    console.log('teenager');
} else if (age >= 18) {
    console.log('adult');
} else {
    console.log('kid');
}

Since the value of age is 20, it actually satisfies both conditions age >= 6 and age >= 18, which shows that the order of condition checks is very important. Please fix it so that it displays "adult".

What if the result of the if condition check is not true or false? For example:

let s = '123';
if (s.length) { // The condition evaluates to 3
    //
}

JavaScript treats null, undefined, 0, NaN, and empty string '' as false; all other values are treated as true. Therefore, the result of the above code condition check is true.

Exercise ​

Xiao Ming is 1.75 meters tall and weighs 80.5 kg. Please help Xiao Ming calculate his BMI index using the BMI formula (weight divided by the square of height) and determine the result based on the BMI index:

• Below 18.5: Underweight
• 18.5-25: Normal
• 25-28: Overweight
• 28-32: Obese
• Above 32: Severely obese

Use if...else... to judge and display the result:

let height = parseFloat(prompt('Please enter height (m):'));
let weight = parseFloat(prompt('Please enter weight (kg):'));

// TODO:
let bmi = ???;
if ...