Control Structures (Conditional Statements) in JavaScript

· JS Module

In programming, control structures decide the flow of execution of a program.
They are like crossroads on a journey:

“If the road is clear, move ahead.
If not, take another path.”

JavaScript uses conditional statements to make decisions based on conditions.

Why Conditional Statements Matter

Without conditions, programs behave like machines with no intelligence.

Conditions allow programs to:

  • Check user input
  • Validate passwords
  • Decide grades
  • Control game logic
  • Handle authentication
  • Build dynamic websites

Example:

let age = 20;

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

The program thinks before acting.

Types of Conditional Statements in JavaScript

JavaScript provides:

  1. if
  2. if...else
  3. else if
  4. Nested if
  5. switch
  6. Ternary Operator (? :)

1. if Statement

Syntax

if (condition) {
    // code executes if condition is true
}

Logic Behind if

The condition is checked.

  • If condition = true → block runs
  • If condition = false → block skipped

Example 1

let temperature = 35;

if (temperature > 30) {
    console.log("Weather is hot");
}

Output

Weather is hot

Step-by-Step Logic

temperature > 30
35 > 30
true

Since condition is true, code executes.

Example 2

let marks = 45;

if (marks >= 50) {
    console.log("Pass");
}

Output

No output.

Because:

45 >= 50
false

Truthy and Falsy Values

JavaScript converts values into true or false.

Falsy Values

These become false:

false
0
""
null
undefined
NaN

Everything else is mostly truthy.

Example

let username = "";

if (username) {
    console.log("Welcome");
}

No output because empty string is falsy.

2. if...else

Used when there are two possible paths.

Syntax

if (condition) {
    // true block
} else {
    // false block
}

Example

let age = 16;

if (age >= 18) {
    console.log("Adult");
} else {
    console.log("Minor");
}

Output

Minor

Logic

16 >= 18
false

So else block runs.

Real-Life Analogy

If it rains:
    take umbrella
Else:
    wear sunglasses

Programming follows the same decision-making pattern.

3. else if

Used for multiple conditions.

Syntax

if (condition1) {

} else if (condition2) {

} else if (condition3) {

} else {

}

Important Rule

JavaScript checks conditions top to bottom.

As soon as one condition becomes true, remaining conditions are skipped.

Example — Grade System

let marks = 78;

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

Output

Grade B

Step-by-Step Logic

78 >= 90 → false
78 >= 75 → true

Execution stops there.

Common Beginner Mistake

Wrong order:

if (marks >= 50) {
    console.log("Grade C");
} else if (marks >= 75) {
    console.log("Grade B");
}

Even if marks = 80:

80 >= 50 → true

So "Grade C" prints incorrectly.

Correct Strategy

Always write:

  • most specific condition first
  • broad condition later

4. Nested if

An if inside another if.

Syntax

if (condition1) {

    if (condition2) {

    }

}

Example

let age = 22;
let hasID = true;

if (age >= 18) {

    if (hasID) {
        console.log("Entry allowed");
    }

}

Output

Entry allowed

Logic

First condition:

22 >= 18 → true

Then second condition checked.

Example with else

let password = "admin123";
let otpVerified = false;

if (password === "admin123") {

    if (otpVerified) {
        console.log("Login successful");
    } else {
        console.log("OTP verification required");
    }

} else {
    console.log("Wrong password");
}

5. switch Statement

Used when comparing one value against many options.

Syntax

switch(expression) {

    case value1:
        // code
        break;

    case value2:
        // code
        break;

    default:
        // code
}

Example

let day = 3;

switch(day) {

    case 1:
        console.log("Monday");
        break;

    case 2:
        console.log("Tuesday");
        break;

    case 3:
        console.log("Wednesday");
        break;

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

Output

Wednesday

Logic

JavaScript compares:

day === caseValue

Why break is Important

Without break, execution continues.

Example Without Break

let num = 1;

switch(num) {

    case 1:
        console.log("One");

    case 2:
        console.log("Two");

    case 3:
        console.log("Three");
}

Output

One
Two
Three

This is called fall-through.

Correct Version

switch(num) {

    case 1:
        console.log("One");
        break;

    case 2:
        console.log("Two");
        break;
}

When to Use switch

Best for:

  • menus
  • days/months
  • role systems
  • multiple exact matches

Avoid for:

  • complex ranges (marks > 80)
  • logical conditions

6. Ternary Operator (? :)

Short form of if...else.

Syntax

condition ? trueValue : falseValue

Example

let age = 20;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Output

Adult

Equivalent if...else

if (age >= 18) {
    result = "Adult";
} else {
    result = "Minor";
}

Use Cases

Good for:

  • short conditions
  • UI rendering
  • assigning values

Avoid:

  • deeply nested logic

Nested Ternary (Avoid Excessively)

let marks = 85;

let result =
    marks >= 90 ? "A" :
    marks >= 75 ? "B" :
    marks >= 50 ? "C" :
    "Fail";

console.log(result);

Works, but readability suffers.

Comparison Operators Used in Conditions

Operator Meaning
== Equal
=== Strict equal
!= Not equal
!== Strict not equal
> Greater than
< Less than
>= Greater or equal
<= Less or equal

== vs ===

== (Loose Equality)

Converts types.

5 == "5"

Output:

true

=== (Strict Equality)

Checks value + datatype.

5 === "5"

Output:

false

Best Practice

Always prefer:

===

and

!==

for safer code.

Logical Operators in Conditions

Operator Meaning
&& AND
`
! NOT

AND (&&)

Both conditions must be true.

let age = 20;
let citizen = true;

if (age >= 18 && citizen) {
    console.log("Eligible");
}

OR (||)

Only one condition needs true.

let role = "admin";

if (role === "admin" || role === "manager") {
    console.log("Access granted");
}

NOT (!)

Reverses boolean.

let loggedIn = false;

if (!loggedIn) {
    console.log("Please login");
}

Short-Circuit Logic

JavaScript stops evaluating early.

Example

false && console.log("Hello");

Output:

Nothing.

Because with &&, if first condition is false, rest is ignored.

Real Project Example

Login System

let username = "anas";
let password = "12345";

if (username === "anas" && password === "12345") {
    console.log("Login successful");
} else {
    console.log("Invalid credentials");
}

ATM Example

let balance = 5000;
let withdraw = 2000;

if (withdraw <= balance) {
    console.log("Transaction successful");
    balance -= withdraw;
} else {
    console.log("Insufficient balance");
}

Weather App Example

let weather = "rainy";

switch(weather) {

    case "sunny":
        console.log("Wear sunglasses");
        break;

    case "rainy":
        console.log("Take umbrella");
        break;

    default:
        console.log("Check forecast");
}

Best Practices

1. Use Meaningful Conditions

Bad:

if (x > y)

Good:

if (userAge > minimumAge)

2. Avoid Deep Nesting

Too much nesting becomes unreadable.

Prefer:

if (!user) return;

instead of many nested blocks.

3. Prefer ===

Safer and predictable.

4. Keep Conditions Simple

Complex conditions become difficult to debug.

Summary Table

Statement Purpose
if Execute when condition true
if...else Choose between two paths
else if Multiple conditions
Nested if Condition inside condition
switch Multiple exact matches
Ternary Short conditional expression

Final Thought

Conditional statements are the decision-making heart of JavaScript.

Without them:

  • websites cannot react,
  • apps cannot validate,
  • games cannot respond,
  • systems cannot think.

A programmer who understands conditions deeply begins to write software that feels alive.

“Code becomes intelligent the moment it learns to choose.”

List of Modules

Anas Khan
Written by