❮ Previous

JavaScript Advanced Control Flow

  • This lesson covers advanced control flow concepts in JavaScript.

  • Introduction to Advanced Control Flow

    So far, we have learned basic control flow using:

    • if

    • if-else

    • switch

    • loops

    In real-world JavaScript programs, developers often need:

    • Shorter syntax

    • Cleaner conditions

    • Better readability

    Advanced control flow techniques help us write:

    • Less code

    • More readable logic

    • Faster decisions

    In this lesson, we will cover:

    1. Ternary Operator (? :)

    2. Logical AND (&&) and Logical OR (||)

    Ternary Operator (? :)

    What is the Ternary Operator ?

    The ternary operator is a short-hand alternative to the if-else statement.

    It is called ternary because it works with three parts:

    1. Condition

    2. Expression if true

    3. Expression if false

    Syntax of Ternary Operator

    condition ? expression_if_true : expression_if_false;

Ternary Operator in JavaScript

Provides a shorter way to write if-else conditions in a single line. 

// Using ternary operator

let age = 20;

age >= 18 
  ? console.log("Eligible to vote") 
  : console.log("Not eligible to vote");

  • The logic remains the same, but the code becomes shorter.

    How Ternary Operator Works

    1. Condition is evaluated

    2. If condition is true → first expression runs

    3. If condition is false → second expression runs

Working of Ternary Operator

Evaluates a condition and returns one of two values based on the result. 

// Example 1: Even or Odd

let num = 7;

let result = (num % 2 === 0) ? "Even" : "Odd";
console.log(result);


// Example 2: Pass or Fail

let marks = 35;

let status = marks >= 40 ? "Pass" : "Fail";
console.log(status);

  • When to Use Ternary Operator ?

    • Simple conditions

    • One-line decisions

    • Assigning values based on condition

    When to Avoid Ternary Operator ?

    • Complex logic

    • Multiple statements

    • Poor readability

    Logical AND (&&) and Logical OR (||)

    What Are Logical Operators ?

    Logical operators are used to combine multiple conditions and return a boolean result (true or false).

    JavaScript mainly uses:

    • Logical AND (&&)

    • Logical OR (||)

    • Logical NOT (!) (covered separately)

      Logical AND Operator (&&)

      How Logical AND (&&) Works

      The AND operator returns true only if all conditions are true.

      Condition 1Condition 2Result
      truetruetrue
      truefalsefalse
      falsetruefalse
      falsefalsefalse

    AND Operator with Conditions

    Combines multiple conditions where both must be true to execute code. 

    // Using AND operator in condition

let age = 22;
let hasID = true;

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

    • Logical OR Operator (||)

      How Logical OR (||) Works

      The OR operator returns true if any one condition is true.
      Condition 1Condition 2Result
      truetruetrue
      truefalsetrue
      falsetruetrue
      falsefalsefalse

    OR Operator with Conditions

    Allows access when at least one condition is true. 

    // Using OR operator in condition

let isAdmin = false;
let isEditor = true;

if (isAdmin || isEditor) {
  console.log("Access granted");
} else {
  console.log("Access denied");
}

    • Short-Circuit Behavior

      JavaScript uses short-circuit evaluation.

      AND (&&)

      • If first condition is false, second condition is not checked

      false && console.log("This will not run");

      OR (||)

      • If first condition is true, second condition is not checked

      true || console.log("This will not run");

      Using AND & OR Without if-else

      Using AND (&&)

      let isLoggedIn = true;


      isLoggedIn && console.log("Welcome User");

      Using OR (||) for Default Values

      let username = "";


      let displayName = username || "Guest";

      console.log(displayName);

      Comparison: AND vs OR

      | Feature | AND (&&) | OR (||) |
      |------|-----------|-----------|
      | True when | All conditions true | Any one condition true |
      | Use case | Strict checks | Flexible checks |
      | Short-circuit | Stops on false | Stops on true |

      Ternary vs Logical Operators

      FeatureTernary OperatorLogical Operators
      PurposeDecision makingCondition combining
      OutputValue or actionBoolean or value
      ComplexitySimple logicMultiple conditions

      Common Beginner Mistakes

      • Overusing ternary operator

      • Writing unreadable nested ternaries

      • Confusing && with ||

      • Forgetting short-circuit behavior

      Best Practices

      • Use ternary only for simple conditions

      • Prefer readability over shorter code

      • Use AND for strict rules

      • Use OR for fallback logic

      • Comment complex conditions

    ❮ Previous