Chapter 12. Conditional Statements In JavaScript

Control flow in JavaScript allows you to dictate the flow of your code based on certain conditions. This is crucial for building dynamic and responsive applications. In this blog, we’ll explore the different ways to control the flow of your JavaScript code using if, if..else, nested if statements, complex conditions, and switch statements.

The if Statement

The if statement is used to execute a block of code only if a specified condition is true.

Example 1: Basic if Statement

let age = 18;
if (age >= 18) {
    console.log('You are an adult.');
}
// Output: You are an adult.

In this example, the message is logged to the console because the condition age >= 18 is true.

The if..else Statement

The if..else statement provides an alternative block of code that executes if the condition is false.

Example 2: if..else Statement

let age = 16;
if (age >= 18) {
    console.log('You are an adult.');
} else {
    console.log('You are a minor.');
}
// Output: You are a minor.

Here, the message “You are a minor.” is logged because the condition age >= 18 is false.

The else if Statement

The else if statement allows you to check multiple conditions in sequence. If the first condition is false, it checks the next condition, and so on.

Example 3: else if Statement

let score = 85;
if (score >= 90) {
    console.log('Grade: A');
} else if (score >= 80) {
    console.log('Grade: B');
} else if (score >= 70) {
    console.log('Grade: C');
} else {
    console.log('Grade: F');
}
// Output: Grade: B

In this example, the score falls into the second condition, so “Grade: B” is logged.

Nesting if Statements

Nesting if statements means placing one if statement inside another. This allows for more complex decision-making.

Example 4: Nested if Statements

let num = 10;
if (num > 0) {
    if (num % 2 === 0) {
        console.log('The number is positive and even.');
    } else {
        console.log('The number is positive and odd.');
    }
} else {
    console.log('The number is not positive.');
}
// Output: The number is positive and even.

Here, the outer if statement checks if num is positive, and the inner if statement checks if it is even.

Complex Conditions

You can combine multiple conditions using logical operators like && (AND) and || (OR) to create complex conditions.

Example 5: Complex Conditions

let age = 20;
let hasLicense = true;
if (age >= 18 && hasLicense) {
    console.log('You can drive.');
} else {
    console.log('You cannot drive.');
}
// Output: You can drive.

In this example, both conditions age >= 18 and hasLicense must be true for the message “You can drive.” to be logged.

The switch Statement

The switch statement is used to execute one of many code blocks based on the value of a variable or expression.

Example 6: Basic switch Statement

let day = 3;
switch (day) {
    case 1:
        console.log('Monday');
        break;
    case 2:
        console.log('Tuesday');
        break;
    case 3:
        console.log('Wednesday');
        break;
    case 4:
        console.log('Thursday');
        break;
    case 5:
        console.log('Friday');
        break;
    case 6:
        console.log('Saturday');
        break;
    case 7:
        console.log('Sunday');
        break;
    default:
        console.log('Invalid day');
}
// Output: Wednesday

In this example, the switch statement matches the value of day with case 3 and executes the corresponding block of code.

Practical Applications

Control flow statements are essential for:

• Form Validation: Checking user inputs and providing feedback.
• Game Logic: Implementing rules and responses based on player actions.
• API Responses: Handling different types of responses from servers.

Understanding control flow statements like if, if..else, nested if statements, complex conditions, and switch statements is vital for writing dynamic and responsive JavaScript code. These tools allow you to create complex decision-making processes, making your applications more interactive and intelligent. Experiment with these concepts in your projects to deepen your understanding and enhance your coding skills.