Control Flow: if, else, else if, and switch

Learn how to control the flow of your JavaScript programs using if, else, else if, and switch statements with simple explanations and examples.

Loading...
Control Flow: if, else, else if, and switch

What is Control Flow?

In programming, control flow means deciding which part of your code runs and when it runs. It helps your program make choices based on conditions.

In JavaScript, you can use control flow statements like if, else if, else, and switch to tell your program what to do in different situations.

Let’s learn how each one works with easy examples.

if Statement

The if statement runs a block of code only if a specified condition is true.

Syntax:

if (condition) {
  // code to run if the condition is true
}
  • if is a keyword that starts the condition check.
  • Inside the parentheses ( ) you put a condition that evaluates to true or false.
  • The code inside the curly braces { } runs only if the condition is true.
  • If the condition is false, the code inside the { } is skipped.

Example:

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

Here,

  • You have a variable age with value 18.
  • The if checks if age is 18 or more (age >= 18).
  • Since 18 is equal to 18, the condition is true.
  • So, the message "You are an adult!" is printed.
  • If the age was less than 18, nothing would happen.

else Statement

The else statement lets you run some code when the if condition is false. It's like an otherwise option.

Syntax:

if (condition) {
  // if condition is true, run this
} else {
  // if condition is false, run this
}
  • else is used right after an if block.
  • The code inside the else block runs only when the if condition is false.
  • It acts as a "backup" or "otherwise" block when the if condition is not met.

Example:

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

Here,

  • The variable age is 16.
  • The if checks if age is 18 or more, but 16 is less than 18, so this condition is false.
  • Because the if condition is false, the else block runs instead.
  • It prints "You are a minor!".

else if Statement

When you want to check multiple conditions, you can use else if between if and else.

Remember, JavaScript checks conditions from top to bottom. Once it finds one that’s true, it runs that code and skips the rest.

Syntax:

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition1 is false and condition2 is true
} else {
  // runs if none of the above conditions are true
}

Example:

let score = 75;
 
if (score >= 90) {
  console.log("Grade A");
} else if (score >= 70) {
  console.log("Grade B");
} else if (score >= 50) {
  console.log("Grade C");
} else {
  console.log("Grade F");
}

Here,

  • The variable score is 75.
  • First, if checks if score is 90 or more, it’s not, so it skips this block.
  • Then, else if checks if score is 70 or more, and 75 is greater than 70, so this is true. It runs this block and prints "Grade B".
  • Since it found a true condition, it skips the rest.
  • If score was less than 50, it would run the last else and print "Grade F".

You can add many else if statements, but too many can make your code hard to read.

switch Statement

When you want to check one value against many options, use switch. It’s easier than writing lots of else if for the same variable.

Syntax:

switch (value) {
  case option1:
    // runs if value === option1
    break;
  case option2:
    // runs if value === option2
    break;
  default:
    // runs if no case matches
}
  • switch checks the value of an expression.
  • Each case compares the expression’s value with a possible value.
  • If a match is found, the code inside that case runs.
  • The break stops the switch from running the code in the next cases.
  • default runs if none of the cases match, it’s like the else for switch.

Example:

let fruit = "apple";
 
switch (fruit) {
  case "banana":
    console.log("Banana is yellow.");
    break;
  case "apple":
    console.log("Apple is red.");
    break;
  case "orange":
    console.log("Orange is orange.");
    break;
  default:
    console.log("Unknown fruit.");
}

Here,

  • The variable fruit holds "apple".
  • The switch checks the value of fruit against each case.
  • It skips "banana" because "apple" is not equal to "banana".
  • When it reaches case "apple", the value matches, so it prints "Apple is red.".
  • The break stops checking further cases.
  • If none of the cases matched, the default block would run and print "Unknown fruit.".

Note: The break statement stops the code from running into the next case. Without it, JavaScript continues running the next cases (called "fall-through").

👉 Next tutorial: Operators in JavaScript

Support Learnify!