DEV Community

Cover image for Mastering JavaScript Control Flow: If-Else and Switch Explained for Beginners
WISDOMUDO
WISDOMUDO

Posted on

Mastering JavaScript Control Flow: If-Else and Switch Explained for Beginners

#javascript #webdev #beginners #programming

Introduction

Control flow is a fundamental concept in JavaScript that determines the order in which code is executed. As a beginner, understanding how JavaScript makes decisions using control structures is essential.

We’ll cover how to apply if, else if, else, and switch statements to control the flow of your program.

These control tools let your application make decisions based on different scenarios.

What You’ll Learn

  1. The 'if' statement
  2. The 'else if' and 'else' blocks
  3. The 'switch' statement

The if Statement

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

Syntax:

if (condition) {
// code to run if the condition is true
}
Enter fullscreen mode Exit fullscreen mode

Real-Life Example:

let age = 18;

if (age >= 18) {
console.log("You can now attend a party");
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

This message is triggered only if the value of age is 18 or above.

The else if and else Statements

The else if statement allows you to test multiple conditions, while else provides a default action when none of the previous conditions are true.

Syntax:

if (condition1) {
  // code if condition1 is true
} else if (condition2) {
  // code if condition2 is true
} else {
  // code if none are true
}
Enter fullscreen mode Exit fullscreen mode

Real-Life Example:

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 70) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

This checks the score and prints the corresponding grade. As soon as a true condition is matched, the rest of the conditions are not checked.

The Switch Statement

The switch statement is used to evaluate one expression against multiple possible values. It’s often cleaner than using many else if statements when comparing the same variable.

Syntax:

switch (expression) {
  case value1:
    // code block
    break;
  case value2:
    // code block
    break;
  default:
    // default code block
}
Enter fullscreen mode Exit fullscreen mode

Real-Life Example:

day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the work week.");
    break;
  case "Friday":
    console.log("Last work day of the week.");
    break;
  default:
    console.log("Just another day.");
}
Enter fullscreen mode Exit fullscreen mode

Explanation:

case: Each case represents a possible match for the expression. If the expression matches a case value, the code inside that block is executed.

break: The break statement tells JavaScript to stop checking further cases and exit the switch block. Without a break, the code will "fall through" and continue executing the next case, even if it doesn’t match.

default: This part runs if the expression doesn’t match any of the listed case values. "else" of a switch statement.

It provides a neat way to manage multiple conditions that depend on the same expression.

Conclusion

Understanding JavaScript control flow is essential for writing logic-driven applications. The if, else if, else, and switch statements give you the ability to guide how your program behaves under different conditions.

  • Use if when you want to check a single condition.
  • Add else if and else for handling multiple possibilities.
  • Use a switch for cleaner, more readable code when evaluating a single variable against many values.

By mastering these control structures, you’ll gain more control over your code and build dynamic, responsive applications. Keep practicing with real examples to strengthen your understanding.

You can reach out to me via LinkedIn

Top comments (0)