JavaScript Conditional Statements

Conditional statements are fundamental control structures in programming languages, used to execute different code blocks based on different conditions. In JavaScript, conditional statements allow the program to decide which part of the code to execute based on whether specific conditions are true or false. Mastering conditional statements is key to writing dynamic and interactive programs. In this chapter, we will learn in depth about various conditional statements in JavaScript.

Basic Concepts of Conditional Statements

Conditional statements are based on boolean logic, determining the program's execution path based on the value of conditional expressions (true or false). The main conditional statements in JavaScript include:

1. if statement
2. if...else statement
3. if...else if...else statement
4. switch statement
5. Ternary operator

if Statement

The most basic conditional statement that executes a code block when the condition is true.

Basic Syntax

if (condition) {
    // Code to execute when condition is true
}

Examples

let age = 18;

if (age >= 18) {
    console.log("You are an adult");
}

// Single line statement can omit braces (not recommended)
if (age >= 18) console.log("You are an adult");

if...else Statement

Executes one code block when the condition is true, and another when it's false.

Basic Syntax

if (condition) {
    // Code to execute when condition is true
} else {
    // Code to execute when condition is false
}

Examples

let age = 16;

if (age >= 18) {
    console.log("You are an adult");
} else {
    console.log("You are a minor");
}

if...else if...else Statement

Used to check multiple conditions, executing the code block corresponding to the first condition that is true.

Basic Syntax

if (condition1) {
    // Code to execute when condition1 is true
} else if (condition2) {
    // Code to execute when condition2 is true
} else if (condition3) {
    // Code to execute when condition3 is true
} else {
    // Code to execute when all conditions are false
}

Examples

let score = 85;

if (score >= 90) {
    console.log("Excellent");
} else if (score >= 80) {
    console.log("Good");
} else if (score >= 70) {
    console.log("Average");
} else if (score >= 60) {
    console.log("Pass");
} else {
    console.log("Fail");
}

Nested if Statements

Conditional statements can be nested, meaning one conditional statement can contain another.

Examples

let age = 25;
let hasLicense = true;

if (age >= 18) {
    if (hasLicense) {
        console.log("You can legally drive");
    } else {
        console.log("You are an adult but don't have a license");
    }
} else {
    console.log("You are a minor");
}

switch Statement

The switch statement is used to execute different code blocks based on different condition values. It's an alternative to if...else if...else, especially suitable for comparing multiple fixed values.

Basic Syntax

switch (expression) {
    case value1:
        // Code to execute when expression equals value1
        break;
    case value2:
        // Code to execute when expression equals value2
        break;
    case value3:
        // Code to execute when expression equals value3
        break;
    default:
        // Code to execute when no case matches
}

Examples

let day = "Monday";

switch (day) {
    case "Monday":
        console.log("Monday");
        break;
    case "Tuesday":
        console.log("Tuesday");
        break;
    case "Wednesday":
        console.log("Wednesday");
        break;
    case "Thursday":
        console.log("Thursday");
        break;
    case "Friday":
        console.log("Friday");
        break;
    case "Saturday":
        console.log("Saturday");
        break;
    case "Sunday":
        console.log("Sunday");
        break;
    default:
        console.log("Invalid day");
}

switch Considerations

1. break statement: Each case usually needs a break statement, otherwise it will continue to execute the following cases (called "fall-through")
2. default branch: Optional, executes when no case matches

let fruit = "apple";

switch (fruit) {
    case "apple":
    case "banana":
    case "orange":
        console.log("This is a fruit");
        break;
    case "carrot":
    case "potato":
        console.log("This is a vegetable");
        break;
    default:
        console.log("Unknown food");
}

Ternary Operator (Conditional Operator)

The ternary operator is a shorthand form of the if...else statement, used for simple conditional judgments.

Basic Syntax

condition ? value1 : value2

Examples

let age = 20;
let status = age >= 18 ? "Adult" : "Minor";
console.log(status); // "Adult"

// Ternary operators can be nested
let score = 85;
let grade = score >= 90 ? "Excellent" : 
           score >= 80 ? "Good" : 
           score >= 70 ? "Average" : 
           score >= 60 ? "Pass" : "Fail";
console.log(grade); // "Good"

Truthy and Falsy Values in Conditional Expressions

In JavaScript, besides boolean values true and false, other values are also converted to boolean in conditional judgments:

Falsy Values

The following values are treated as false in conditional judgments:

false
0
-0
0n (BigInt)
"" (empty string)
null
undefined
NaN

Truthy Values

All values except falsy values are treated as true:

true
Non-zero numbers (including negative numbers)
Non-empty strings
Objects (including empty objects)
Arrays (including empty arrays)
Functions

Examples

// These conditions will all be treated as false
if (false) console.log("Won't execute");
if (0) console.log("Won't execute");
if ("") console.log("Won't execute");
if (null) console.log("Won't execute");
if (undefined) console.log("Won't execute");
if (NaN) console.log("Won't execute");

// These conditions will all be treated as true
if (true) console.log("Will execute");
if (1) console.log("Will execute");
if ("hello") console.log("Will execute");
if ({}) console.log("Will execute");
if ([]) console.log("Will execute");

Logical Operators in Conditional Statements

Logical AND (&&)

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
    console.log("Can legally drive");
}

Logical OR (||)

let userType = "admin";
let isLoggedIn = true;

if (userType === "admin" || isLoggedIn) {
    console.log("Can access");
}

Logical NOT (!)

let isOffline = false;

if (!isOffline) {
    console.log("Online status");
}

Short-Circuit Evaluation

// Logical AND short-circuit: if the first condition is false, the second is not checked
let user = null;
if (user && user.name) {
    console.log(user.name);
}

// Logical OR short-circuit: if the first condition is true, the second is not checked
let defaultName = "Anonymous User";
let userName = user && user.name || defaultName;

Best Practices for Conditional Statements

1. Use Appropriate Conditional Statements

// For comparing multiple fixed values, use switch
let status = "pending";

switch (status) {
    case "pending":
        handlePending();
        break;
    case "approved":
        handleApproved();
        break;
    case "rejected":
        handleRejected();
        break;
    default:
        handleUnknown();
}

// For range comparisons, use if...else if
let score = 85;

if (score >= 90) {
    grade = "A";
} else if (score >= 80) {
    grade = "B";
} else if (score >= 70) {
    grade = "C";
} else {
    grade = "D";
}

2. Avoid Deep Nesting

// Bad practice
if (user) {
    if (user.isActive) {
        if (user.hasPermission) {
            // Execute operation
        }
    }
}

// Good practice
if (user && user.isActive && user.hasPermission) {
    // Execute operation
}

// Or return early
if (!user) return;
if (!user.isActive) return;
if (!user.hasPermission) return;
// Execute operation

3. Use Guard Clauses

function processUser(user) {
    // Guard clauses: handle exceptional cases early
    if (!user) {
        console.log("User does not exist");
        return;
    }
    
    if (!user.isActive) {
        console.log("User is not active");
        return;
    }
    
    // Normal processing logic
    console.log("Processing user: " + user.name);
}

4. Use Ternary Operators Wisely

// Use ternary operator for simple cases
const message = isLoggedIn ? "Welcome back" : "Please login";

// Use if statement for complex cases
if (userType === "admin") {
    showAdminPanel();
    enableAllFeatures();
} else if (userType === "user") {
    showUserPanel();
    enableBasicFeatures();
} else {
    showGuestPanel();
    enableLimitedFeatures();
}

Practical Examples

User Permission Check System

function checkUserAccess(user, resource) {
    // Check if user exists
    if (!user) {
        return { allowed: false, message: "User not logged in" };
    }
    
    // Check if user is active
    if (!user.isActive) {
        return { allowed: false, message: "User account is not active" };
    }
    
    // Check permissions based on user role
    switch (user.role) {
        case "admin":
            return { allowed: true, message: "Admin permission" };
        
        case "editor":
            if (resource.type === "article" || resource.type === "image") {
                return { allowed: true, message: "Editor permission" };
            } else {
                return { allowed: false, message: "Insufficient permission" };
            }
        
        case "viewer":
            if (resource.type === "article" && resource.isPublic) {
                return { allowed: true, message: "View permission" };
            } else {
                return { allowed: false, message: "Insufficient permission" };
            }
        
        default:
            return { allowed: false, message: "Unknown user role" };
    }
}

// Usage example
const user = {
    name: "John",
    role: "editor",
    isActive: true
};

const resource = {
    type: "article",
    isPublic: true
};

const access = checkUserAccess(user, resource);
console.log(access.message);

Grade Evaluation System

function getGrade(score, subject) {
    // Input validation
    if (typeof score !== 'number' || score < 0 || score > 100) {
        return "Invalid score";
    }
    
    // Adjust grading standard based on subject
    let grade;
    
    if (subject === "Math" || subject === "Physics") {
        // Science grading standard
        if (score >= 95) {
            grade = "A+";
        } else if (score >= 90) {
            grade = "A";
        } else if (score >= 85) {
            grade = "B+";
        } else if (score >= 80) {
            grade = "B";
        } else if (score >= 75) {
            grade = "C+";
        } else if (score >= 70) {
            grade = "C";
        } else if (score >= 60) {
            grade = "D";
        } else {
            grade = "F";
        }
    } else {
        // Arts grading standard
        if (score >= 90) {
            grade = "A";
        } else if (score >= 85) {
            grade = "B+";
        } else if (score >= 80) {
            grade = "B";
        } else if (score >= 75) {
            grade = "C+";
        } else if (score >= 70) {
            grade = "C";
        } else if (score >= 60) {
            grade = "D";
        } else {
            grade = "F";
        }
    }
    
    // Add comment
    const comment = score >= 80 ? "Excellent" : 
                   score >= 70 ? "Good" : 
                   score >= 60 ? "Pass" : "Needs improvement";
    
    return {
        grade: grade,
        comment: comment,
        score: score
    };
}

// Usage examples
console.log(getGrade(95, "Math")); // { grade: "A+", comment: "Excellent", score: 95 }
console.log(getGrade(85, "English")); // { grade: "B+", comment: "Excellent", score: 85 }

Summary

Key points about JavaScript conditional statements:

1. if statement: The most basic conditional judgment
2. if...else statement: Two-way conditional judgment
3. if...else if...else statement: Multi-condition judgment
4. switch statement: Multi-value selection conditional judgment
5. Ternary operator: Concise conditional expression
6. Truthy and falsy values: Boolean conversion rules in JavaScript
7. Logical operators: Combining multiple conditions
8. Best practices: Avoid deep nesting, use guard clauses, etc.

Mastering conditional statements is the foundation for writing dynamic JavaScript programs. In the next chapter, we will learn about JavaScript loop statements.