Control Flow (if–else, switch)

Lesson Overview

Control flow statements allow your program to make decisions and execute different code blocks based on conditions. Understanding conditional logic is essential for creating dynamic and responsive applications.

What You'll Learn:

• if, if-else, and if-else if-else statements
• Switch statements for multiple conditions
• Ternary operator for concise conditionals
• Nested conditional statements
• Best practices for readable conditional logic

Key Concepts:

• Conditional statements control program flow based on boolean expressions
• Switch statements provide cleaner alternatives to multiple if-else chains
• Proper indentation and structure improve code readability

Introduction to Control Flow

Control flow is the order in which individual statements, instructions, or function calls are executed or evaluated. In JavaScript, control flow statements allow your programs to make decisions and execute different code paths based on specific conditions. This fundamental concept enables your applications to respond dynamically to different inputs, user actions, or system states.

Without control flow, programs would execute sequentially from top to bottom, making them rigid and predictable. Control flow introduces decision-making capabilities, allowing your code to adapt to varying circumstances and handle different scenarios appropriately.

Boolean Values and Conditions

Before diving into control flow statements, it's essential to understand that all conditional statements in JavaScript rely on boolean values (true or false). Conditions are expressions that evaluate to a boolean value, determining which code block should be executed.

JavaScript uses truthy and falsy values, where non-boolean values can be evaluated in boolean contexts. Falsy values include: false, 0, "" (empty string), null, undefined, NaN, and 0n (BigInt zero). All other values are considered truthy.

// Boolean conditions
let isLoggedin = true;
let hasPermission = false;

// Truthy and falsy values
let username = ""; // falsy
let age = 0; // falsy
let user = null; // falsy
let data = undefined; // falsy
let count = NaN; // falsy

let name = "John"; // truthy
let score = 100; // truthy
let users = []; // truthy (empty arrays are truthy!)
let config = {}; // truthy (empty objects are truthy!)

The if Statement

The if statement is the most basic form of conditional execution. It executes a block of code only if the specified condition evaluates to true. If the condition is false, the code block is skipped, and program execution continues with the next statement.

let temperature = 25;

if (temperature > 30) {
  console.log("It's hot outside!");
}

if (temperature <= 30) {
  console.log("The weather is pleasant.");
}

The condition in an if statement can be any expression that evaluates to a boolean value. This includes comparison operations, logical operations, function calls that return boolean values, or any combination thereof.

let userAge = 18;
let hasParentalConsent = true;

if (userAge >= 18 || hasParentalConsent) {
  console.log("Access granted");
}

if (userAge >= 13 && userAge < 18) {
  console.log("Teenager access with restrictions");
}

The if-else Statement

The if-else statement provides an alternative code block to execute when the condition evaluates to false. This creates a binary decision structure where exactly one of the two code blocks will be executed.

let score = 85;

if (score >= 60) {
  console.log("You passed the exam!");
} else {
  console.log("You failed the exam. Please try again.");
}

let isLoggedIn = false;

if (isLoggedIn) {
  console.log("Welcome back, user!");
} else {
  console.log("Please log in to continue.");
}

The if-else structure is particularly useful when you need to handle exactly two possible outcomes. It ensures that one path or the other will always be taken, making your code more predictable and complete.

function checkEvenOdd(number) {
  if (number % 2 === 0) {
    return "Even";
  } else {
    return "Odd";
  }
}

console.log(checkEvenOdd(4)); // "Even"
console.log(checkEvenOdd(7)); // "Odd"

The if-else if-else Statement

When you need to handle multiple conditions, you can chain if-else if-else statements. This structure evaluates conditions sequentially and executes the first code block whose condition evaluates to true. Once a condition is met and its code block is executed, the remaining conditions are skipped.

let grade = 85;

if (grade >= 90) {
  console.log("Excellent! Grade: A");
} else if (grade >= 80) {
  console.log("Good job! Grade: B");
} else if (grade >= 70) {
  console.log("Fair performance. Grade: C");
} else if (grade >= 60) {
  console.log("Needs improvement. Grade: D");
} else {
  console.log("Failed. Grade: F");
}

The else if blocks allow you to create sophisticated decision trees that can handle multiple scenarios. It's important to order your conditions carefully, as they are evaluated from top to bottom.

function categorizeAge(age) {
  if (age < 0) {
    return "Invalid age";
  } else if (age <= 12) {
    return "Child";
  } else if (age <= 19) {
    return "Teenager";
  } else if (age <= 64) {
    return "Adult";
  } else {
    return "Senior";
  }
}

console.log(categorizeAge(8));   // "Child"
console.log(categorizeAge(16));  // "Teenager"
console.log(categorizeAge(25));  // "Adult"
console.log(categorizeAge(70));  // "Senior"

Nested Conditional Statements

You can nest conditional statements inside other conditional statements to create more complex decision-making logic. This is useful when you need to check additional conditions only after a primary condition has been satisfied.

let weather = "sunny";
let temperature = 28;

if (weather === "sunny") {
  if (temperature > 30) {
    console.log("It's sunny and hot. Stay hydrated!");
  } else if (temperature > 20) {
    console.log("It's sunny and pleasant. Great day for a walk!");
  } else {
    console.log("It's sunny but cool. Bring a light jacket.");
  }
} else if (weather === "rainy") {
  console.log("Don't forget your umbrella!");
} else {
  console.log("Check the weather forecast for details.");
}

While nesting can be powerful, it's important to avoid excessive nesting as it can make code difficult to read and maintain. Consider refactoring deeply nested conditions into separate functions or using early returns.

// Instead of deep nesting, use early returns
function validateUser(user) {
  if (!user) {
    return "User not found";
  }
  
  if (!user.email) {
    return "Email is required";
  }
  
  if (!user.email.includes("@")) {
    return "Invalid email format";
  }
  
  if (user.age < 18) {
    return "User must be at least 18 years old";
  }
  
  return "User is valid";
}

The Switch Statement

The switch statement provides a cleaner alternative to multiple if-else if statements when you need to compare a single value against multiple possible constants. It's particularly useful for handling menu options, status codes, or other discrete value scenarios.

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the work week");
    break;
  case "Tuesday":
  case "Wednesday":
  case "Thursday":
    console.log("Midweek days");
    break;
  case "Friday":
    console.log("Almost weekend!");
    break;
  case "Saturday":
  case "Sunday":
    console.log("Weekend!");
    break;
  default:
    console.log("Invalid day");
}

The switch statement works by comparing the expression in parentheses with each case value using strict equality (===). When a match is found, execution continues from that case until a break statement is encountered or the end of the switch block is reached.

function getSeason(month) {
  switch (month) {
    case "December":
    case "January":
    case "February":
      return "Winter";
    case "March":
    case "April":
    case "May":
      return "Spring";
    case "June":
    case "July":
    case "August":
      return "Summer";
    case "September":
    case "October":
    case "November":
      return "Fall";
    default:
      return "Invalid month";
  }
}

console.log(getSeason("April"));    // "Spring"
console.log(getSeason("August"));   // "Summer"
console.log(getSeason("October"));  // "Fall"

The Importance of Break Statements

The break statement is crucial in switch statements to prevent "fall-through" behavior. Without break, execution will continue through subsequent case blocks even after a match has been found.

// Without break - fall-through behavior
let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("Selected apple");
  case "banana":
    console.log("Selected banana");
  case "orange":
    console.log("Selected orange");
    break;
  default:
    console.log("Unknown fruit");
}

// Output:
// "Selected apple"
// "Selected banana"
// "Selected orange"

// With break - proper behavior
switch (fruit) {
  case "apple":
    console.log("Selected apple");
    break;
  case "banana":
    console.log("Selected banana");
    break;
  case "orange":
    console.log("Selected orange");
    break;
  default:
    console.log("Unknown fruit");
}

// Output:
// "Selected apple"

Sometimes, intentional fall-through can be useful when multiple cases should execute the same code block, as shown in the earlier weekday example.

The Ternary Operator

The ternary operator (? :) provides a concise way to write simple conditional expressions. It's the only JavaScript operator that takes three operands and is often used as a shorthand for simple if-else statements.

let age = 20;
let message = age >= 18 ? "You can vote" : "You cannot vote";
console.log(message); // "You can vote"

let score = 75;
let result = score >= 60 ? "Pass" : "Fail";
console.log(result); // "Pass"

The ternary operator syntax is: condition ? value_if_true : value_if_false. It's particularly useful for assigning values based on conditions or for simple conditional returns.

function getDiscount(price, isMember) {
  return isMember ? price * 0.9 : price;
}

console.log(getDiscount(100, true));   // 90
console.log(getDiscount(100, false));  // 100

// Nested ternary operators (use sparingly for readability)
let grade = 85;
let letter = grade >= 90 ? "A" : grade >= 80 ? "B" : grade >= 70 ? "C" : "F";
console.log(letter); // "B"

While the ternary operator can make code more concise, avoid using it for complex conditions or nested scenarios, as it can reduce readability. In such cases, traditional if-else statements are preferable.

Logical Operators in Conditions

Logical operators (&&, ||, !) are essential for building complex conditions. They allow you to combine multiple boolean expressions and create sophisticated decision-making logic.

AND Operator (&&)

The && operator returns true only if both operands are true. It uses short-circuit evaluation, meaning if the first operand is false, the second operand is not evaluated.

let username = "john";
let password = "secret123";

if (username && password) {
  console.log("Both username and password are provided");
}

if (username.length > 3 && password.length > 6) {
  console.log("Valid credentials length");
}

// Short-circuit example
let user = null;
if (user && user.isActive) {
  console.log("This won't execute due to short-circuit");
}

OR Operator (||)

The || operator returns true if at least one operand is true. It also uses short-circuit evaluation, returning the first truthy value it encounters.

let firstName = "";
let lastName = "Doe";
let displayName = firstName || lastName || "Anonymous";
console.log(displayName); // "Doe"

let userRole = "admin";
let isAdmin = userRole === "admin" || userRole === "superadmin";
console.log(isAdmin); // true

NOT Operator (!)

The ! operator inverts the boolean value of its operand. It's useful for checking the opposite of a condition.

let isLoggedIn = false;

if (!isLoggedIn) {
  console.log("Please log in to continue");
}

let email = "[email protected]";
if (!email.includes("@")) {
  console.log("Invalid email format");
}

Best Practices for Control Flow

1. Use Clear and Descriptive Conditions

Write conditions that are easy to understand and maintain. Avoid overly complex boolean expressions that make code difficult to read.

// Good - clear and readable
if (userAge >= 18 && hasValidId && !isBanned) {
  grantAccess();
}

// Avoid - overly complex
if (a > b && c < d || e === f && (g || h) && !i) {
  doSomething();
}

2. Handle Edge Cases

Always consider edge cases and unexpected inputs in your conditional logic.

function calculateDiscount(price, customerType) {
  if (typeof price !== "number" || price <= 0) {
    return 0;
  }
  
  switch (customerType) {
    case "premium":
      return price * 0.2;
    case "regular":
      return price * 0.1;
    default:
      return 0;
  }
}

3. Use Early Returns

Early returns can reduce nesting and make code more readable, especially in functions.

// Instead of this:
function validateEmail(email) {
  if (email) {
    if (email.includes("@")) {
      if (email.includes(".")) {
        return true;
      } else {
        return false;
      }
    } else {
      return false;
    }
  } else {
    return false;
  }
}

// Use early returns:
function validateEmail(email) {
  if (!email) return false;
  if (!email.includes("@")) return false;
  if (!email.includes(".")) return false;
  return true;
}

4. Choose the Right Control Structure

Select the most appropriate control structure for your specific use case.

// Use switch for discrete values
function getDayType(day) {
  switch (day) {
    case "Saturday":
    case "Sunday":
      return "Weekend";
    default:
      return "Weekday";
  }
}

// Use if-else for ranges and complex conditions
function getTemperatureAdvice(temp) {
  if (temp < 0) {
    return "Freezing - stay indoors!";
  } else if (temp < 10) {
    return "Cold - wear a warm coat";
  } else if (temp < 20) {
    return "Cool - light jacket recommended";
  } else if (temp < 30) {
    return "Comfortable - perfect weather!";
  } else {
    return "Hot - stay hydrated!";
  }
}

Common Pitfalls and How to Avoid Them

1. Assignment vs Comparison

A common mistake is using the assignment operator (=) instead of the comparison operator (== or ===) in conditions.

// Wrong - assignment instead of comparison
let x = 5;
if (x = 10) {  // This assigns 10 to x and evaluates to 10 (truthy)
  console.log("This will always execute");
}

// Correct - proper comparison
if (x === 10) {
  console.log("This only executes if x equals 10");
}

2. Forgetting Break Statements

Forgetting break statements in switch cases can lead to unexpected behavior.

// Potential bug - missing break
switch (status) {
  case "pending":
    console.log("Processing...");
  case "completed":
    console.log("Done!");
    break;
}

// Correct - with proper breaks
switch (status) {
  case "pending":
    console.log("Processing...");
    break;
  case "completed":
    console.log("Done!");
    break;
}

3. Complex Nested Conditions

Excessive nesting can make code hard to read and maintain.

// Avoid - deeply nested
if (user) {
  if (user.isActive) {
    if (user.hasPermission) {
      if (user.isVerified) {
        grantAccess();
      }
    }
  }
}

// Better - flattened with early returns
function checkUserAccess(user) {
  if (!user) return false;
  if (!user.isActive) return false;
  if (!user.hasPermission) return false;
  if (!user.isVerified) return false;
  return true;
}

if (checkUserAccess(user)) {
  grantAccess();
}

Practical Examples

Example 1: User Authentication System

function authenticateUser(username, password, isActive, hasPermission) {
  // Check if credentials are provided
  if (!username || !password) {
    return { success: false, message: "Username and password required" };
  }
  
  // Check if user exists and is active
  if (!isActive) {
    return { success: false, message: "Account is deactivated" };
  }
  
  // Check password (simplified - in real apps, use proper hashing)
  if (password.length < 8) {
    return { success: false, message: "Invalid password" };
  }
  
  // Check permissions
  if (!hasPermission) {
    return { success: false, message: "Insufficient permissions" };
  }
  
  return { success: true, message: "Authentication successful" };
}

// Usage
let result = authenticateUser("john", "password123", true, true);
console.log(result);

Example 2: Shopping Cart Calculator

function calculateTotal(items, isMember, hasDiscountCode) {
  if (!items || items.length === 0) {
    return { total: 0, discount: 0, final: 0 };
  }
  
  let subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  let discount = 0;
  
  // Apply member discount
  if (isMember) {
    discount += subtotal * 0.1; // 10% member discount
  }
  
  // Apply additional discount code
  if (hasDiscountCode) {
    discount += subtotal * 0.05; // 5% discount code
  }
  
  let finalTotal = subtotal - discount;
  
  return {
    subtotal: subtotal,
    discount: discount,
    final: finalTotal
  };
}

// Usage
let cart = [
  { name: "Book", price: 20, quantity: 2 },
  { name: "Pen", price: 2, quantity: 5 }
];

let result = calculateTotal(cart, true, false);
console.log(result);

Example 3: Traffic Light System

function getTrafficLightAction(light, pedestrianWaiting, emergencyVehicle) {
  // Emergency vehicles have priority
  if (emergencyVehicle) {
    return "All lights red - clear intersection";
  }
  
  switch (light) {
    case "red":
      return "Stop";
      
    case "yellow":
      return "Prepare to stop";
      
    case "green":
      if (pedestrianWaiting) {
        return "Proceed with caution - pedestrians crossing";
      } else {
        return "Go";
      }
      
    case "flashing_red":
      return "Stop, then proceed when safe";
      
    case "flashing_yellow":
      return "Proceed with caution";
      
    default:
      return "Invalid traffic light state";
  }
}

// Test scenarios
console.log(getTrafficLightAction("green", false, false));           // "Go"
console.log(getTrafficLightAction("green", true, false));            // "Proceed with caution - pedestrians crossing"
console.log(getTrafficLightAction("red", false, true));              // "All lights red - clear intersection"
console.log(getTrafficLightAction("yellow", false, false));         // "Prepare to stop"

Summary

Control flow statements are fundamental building blocks of programming that enable your applications to make decisions and respond dynamically to different conditions. Mastering if-else statements, switch cases, and the ternary operator will allow you to create sophisticated and responsive programs.

Key takeaways:

• Use if statements for simple conditions
• Use if-else for binary decisions
• Use if-else if-else for multiple sequential conditions
• Use switch statements when comparing a single value against multiple constants
• Use the ternary operator for simple, concise conditional expressions
• Always consider readability and maintainability when writing conditional logic
• Handle edge cases and unexpected inputs appropriately
• Use early returns to reduce nesting and improve code clarity

Practice these concepts by building real-world applications that require decision-making logic, such as form validation, user authentication systems, or game mechanics. The more you work with control flow statements, the more intuitive they will become.