❮ Previous Next ❯

JavaScript Conditional Statements

  • This lesson explains different conditional statements in JavaScript.

  • What Are Conditional Statements ?

    Conditional statements are used to make decisions in a program.

    They allow JavaScript to:

    • Execute different blocks of code

    • Based on conditions

    • That evaluate to true or false

    In simple words:
    Conditional statements help JavaScript decide what to do next.

    Why Do We Need Conditional Statements ?

    Without conditional statements:

    • Code would always run the same way

    • No decision-making

    • No logic

    • No real-world application

    With conditional statements:

    • Programs can react to user input

    • Different outputs for different situations

    • Smart and dynamic behavior

    Real-Life Example

    “If it is raining, take an umbrella.
     Else, do not take an umbrella.”

    This is exactly how conditional statements work.

    Types of Conditional Statements in JavaScript

    JavaScript provides the following conditional statements:

    1. if

    2. if...else

    3. if...else if...else

    4. switch

      if Statement

      What Is if ?

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

      Syntax

      if (condition) {

        // code to execute if condition is true

      }

    if Statement

    Executes code only when the given condition evaluates to true. 

    // Basic if statement

let age = 18;

if (age >= 18) {
  console.log("You are eligible to vote");
}

    • Explanation

      • age >= 18 is the condition

      • If the condition is true, the message is printed

      • If false, nothing happens

      When to Use if

      • When only one condition needs to be checked

      • When no alternative action is required

      The if...else Statement

      What is if...else ?

      The if...else statement executes:

      • One block if the condition is true

      • Another block if the condition is false

      Syntax

      if (condition) {

        // code if true

      } else {

        // code if false

      }

    if...else Statement

    Chooses between two blocks depending on whether the condition is true or false. 

    // if...else example

let number = 5;

if (number % 2 === 0) {
  console.log("Even number");
} else {
  console.log("Odd number");
}

    • Explanation

      • Condition checks if number is even

      • If true → prints "Even number"

      • Else → prints "Odd number"

      Real-Life Example

      “If marks are greater than or equal to 40, pass.
       Else, fail.”

      The if...else if...else Statement

      What Is else if ?

      Used when multiple conditions need to be checked.

      JavaScript checks conditions top to bottom.

      Syntax

      if (condition1) {

        // code

      } else if (condition2) {

        // code

      } else if (condition3) {

        // code

      } else {

        // default code

      }

    if...else if...else

    Checks multiple conditions in sequence and runs the first matching block. 

    // Multiple condition checking

let marks = 72;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 75) {
  console.log("Grade B");
} else if (marks >= 60) {
  console.log("Grade C");
} else {
  console.log("Fail");
}

    • Explanation

      • JavaScript checks conditions one by one

      • First true condition executes

      • Remaining conditions are skipped

      Important Rule

      Only one block executes in an if...else if...else chain.

      Common Beginner Mistakes with if

      • Forgetting curly braces { }

      • Using = instead of == or ===

      • Wrong condition order

      • Missing final else

        Comparison Operators Commonly Used

        OperatorMeaning
        ==Equal (value)
        ===Equal (value + type)
        !=Not equal
        >Greater than
        <Less than
        >=Greater than or equal
        <=Less than or equal

      • The switch Statement

        What is switch ?

        The switch statement is used to perform different actions based on different values of a variable.

        It is an alternative to multiple else if statements.

        Syntax

        switch (expression) {

          case value1:

            // code

            break;

          case value2:

            // code

            break;

          default:

            // code

        }

      switch Statement

      Selects and runs a block of code based on matching case values. 

      // switch example

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;

  default:
    console.log("Invalid day");
}

      • Explanation

        • day is compared with each case

        • Matching case executes

        • break stops execution

        • default runs if no case matches

          Why break is Important

          Without break, execution continues to the next case.

        switch Without break Behavior

        Continues execution into next cases when break is not used. 

        // switch without break

let x = 1;

switch (x) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
}

        • This is called fall-through.

          When to Use switch

          • When checking one variable

          • Against fixed values

          • Menu systems

          • Options selection

            if-else vs switch

            Featureif-elseswitch
            ConditionsComplexFixed values
            ReadabilityModerateHigh
            Best forRanges, logicExact matches
            FlexibilityHighLimited

            Best Practices for Conditional Statements

            • Use === instead of ==

            • Keep conditions simple

            • Avoid deep nesting

            • Use switch for fixed options

            • Write readable logic

            Real-World Use Cases

            • Login validation

            • Form checks

            • Grade systems

            • Menu selection

            • Role-based access

          ❮ Previous Next ❯