Control Flow and Decision Making

JavaScript for Beginners

5.1 if, else, and else if

Conditional statements allow your JavaScript program to make decisions and run different code depending on whether certain conditions are true or false. The most common way to do this is with if, else if, and else blocks.

Basic if Statement

An if statement runs a block of code only if the condition inside the parentheses is true:

let age = 18;

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

If age is 18 or more, the message appears; otherwise, nothing happens.

Adding an else

Use else to run code when the condition is false:

let age = 15;

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

Using else if for Multiple Conditions

else if lets you check multiple conditions in sequence:

let temperature = 30;

if (temperature > 35) {
  console.log("It's very hot!");
} else if (temperature > 20) {
  console.log("It's warm.");
} else {
  console.log("It's cold.");
}

Nested Conditions

You can nest if statements inside each other to create more complex logic:

let userRole = "admin";
let isLoggedIn = true;

if (isLoggedIn) {
  if (userRole === "admin") {
    console.log("Welcome, admin!");
  } else {
    console.log("Welcome, user!");
  }
} else {
  console.log("Please log in.");
}

Combining Conditions with Logical Operators

Use && (AND) and || (OR) to combine conditions:

let age = 22;
let hasID = true;

if (age >= 18 && hasID) {
  console.log("Entry allowed.");
} else {
  console.log("Entry denied.");
}

Summary

• Use if to run code when a condition is true.
• Use else to handle the false case.
• Use else if to check multiple conditions.
• Nest and combine conditions for more control.

Mastering these conditional statements helps your program make decisions based on data and user input.

5.2 switch Statements

The switch statement offers a clean and organized way to compare a value against many possible cases. It’s often used as an alternative to multiple if-else blocks, especially when you’re checking the same variable against different values.

How switch Works

• The value inside the switch(expression) is compared to each case value.
• When a match is found, the code under that case runs.
• The break statement stops the code from continuing to run into the next cases.
• If no cases match, the default case runs (optional but recommended).

Real-World Example: Day of the Week

Imagine you want to display a message based on the current day:

let day = "Tuesday";

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

Important Notes

• break prevents “fall-through,” which means without it, the program continues executing all the following cases.
• default runs when none of the cases match and helps handle unexpected input.

Summary

switch is a powerful tool to replace complex if-else chains when you’re comparing a single variable to many values. Using break correctly and including a default ensures your code behaves as expected and is easy to read.

5.3 Ternary Operator

The ternary operator is a compact way to write simple if-else statements in JavaScript. It’s called “ternary” because it takes three parts: a condition, a result if the condition is true, and a result if the condition is false.

Syntax:

condition ? expr1 : expr2

• If condition is true, the operator returns expr1.
• If condition is false, it returns expr2.

Example: Greeting Based on Time

let hour = 14;
let greeting = hour < 12 ? "Good morning!" : "Good afternoon!";
console.log(greeting);  // Outputs: Good afternoon!

This is equivalent to:

let hour = 14;
let greeting;

if (hour < 12) {
  greeting = "Good morning!";
} else {
  greeting = "Good afternoon!";
}

console.log(greeting);

Example: Access Based on Age

let age = 20;
let access = age >= 18 ? "Access granted" : "Access denied";
console.log(access);  // Outputs: Access granted

Why Use the Ternary Operator?

• It makes your code shorter and often easier to read for simple decisions.
• Best used when the result is assigned to a variable or returned directly.
• Avoid overusing it for complex conditions to keep your code clear.

Summary

The ternary operator provides a neat and concise way to express simple conditional logic, making your JavaScript code cleaner and more efficient.