JavaScript Conditional Statements – Making Decisions in Programs

In the previous article, we learned about operators and expressions. Operators help us compare values and create conditions. However, a program also needs the ability to make decisions based on those conditions.

For example:

• If marks are greater than 40, display "Pass".

• If age is 18 or above, allow voting.

• If username and password are correct, allow login.

These decisions are made using Conditional Statements.

In this article, we will learn:

• What conditional statements are

• if statement

• if-else statement

• else-if ladder

• Nested if

• switch statement

• Ternary operator

• Real-world examples

• Dry runs

---

What are Conditional Statements?

Conditional statements allow programs to execute different blocks of code depending on whether a condition is true or false.

Basic idea:

Condition
    ↓
True → Execute Code A

False → Execute Code B

---

Why Conditional Statements are Needed

Without conditions:

document.write("You Passed");

Every student would pass.

Using conditions:

if(marks >= 40)
{
    document.write("You Passed");
}

Only eligible students pass.

---

Types of Conditional Statements

JavaScript provides:

Statement	Purpose
if	One condition
if-else	Two alternatives
else-if ladder	Multiple conditions
nested if	Conditions inside conditions
switch	Multiple choices
ternary operator	Short if-else

---

The if Statement

The if statement executes code only when a condition is true.

---

Syntax

if(condition)
{
    statements;
}

---

Example

let age = 20;

if(age >= 18)
{
    document.write("Eligible to Vote");
}

---

Dry Run

age = 20

Condition:

20 >= 18

true

Execute block

Output:

Eligible to Vote

---

Example 2

let marks = 80;

if(marks > 40)
{
    document.write("Pass");
}

Output:

Pass

---

False Condition Example

let marks = 30;

if(marks > 40)
{
    document.write("Pass");
}

Output:

Nothing displayed

Because condition is false.

---

The if-else Statement

The if-else statement provides two alternatives.

---

Syntax

if(condition)
{
    statements;
}
else
{
    statements;
}

---

Example

let age = 16;

if(age >= 18)
{
    document.write("Eligible to Vote");
}
else
{
    document.write("Not Eligible");
}

---

Dry Run

age = 16

16 >= 18

false

else executes

Output:

Not Eligible

---

Pass-Fail Example

let marks = 75;

if(marks >= 40)
{
    document.write("Pass");
}
else
{
    document.write("Fail");
}

Output:

Pass

---

Even-Odd Program

let num = 10;

if(num % 2 == 0)
{
    document.write("Even Number");
}
else
{
    document.write("Odd Number");
}

---

Dry Run

10 % 2

Remainder = 0

Condition true

Output:

Even Number

---

else-if Ladder

Used when multiple conditions must be checked.

---

Syntax

if(condition1)
{
}
else if(condition2)
{
}
else if(condition3)
{
}
else
{
}

---

Grade Calculation Example

let marks = 85;

if(marks >= 90)
{
    document.write("Grade A+");
}
else if(marks >= 80)
{
    document.write("Grade A");
}
else if(marks >= 70)
{
    document.write("Grade B");
}
else
{
    document.write("Grade C");
}

---

Dry Run

marks = 85

85 >= 90 → false

85 >= 80 → true

Grade A displayed

Output:

Grade A

---

Student Result Example

let marks = 65;

if(marks >= 80)
{
    document.write("Distinction");
}
else if(marks >= 60)
{
    document.write("First Division");
}
else if(marks >= 40)
{
    document.write("Pass");
}
else
{
    document.write("Fail");
}

---

Nested if Statement

An if statement inside another if statement.

---

Syntax

if(condition1)
{
    if(condition2)
    {
    }
}

---

Example

let age = 20;

let citizenship = true;

if(age >= 18)
{
    if(citizenship == true)
    {
        document.write("Eligible to Vote");
    }
}

---

Dry Run

age >= 18

true

citizenship == true

true

Eligible

Output:

Eligible to Vote

---

Login System Example

let username = "admin";

let password = "1234";

if(username == "admin")
{
    if(password == "1234")
    {
        document.write("Login Successful");
    }
}

---

Switch Statement

Used when many choices exist.

Better than long else-if ladders in certain situations.

---

Syntax

switch(expression)
{
    case value1:
        statements;
        break;

    case value2:
        statements;
        break;

    default:
        statements;
}

---

Day Example

let day = 3;

switch(day)
{
    case 1:
        document.write("Monday");
        break;

    case 2:
        document.write("Tuesday");
        break;

    case 3:
        document.write("Wednesday");
        break;

    default:
        document.write("Invalid Day");
}

---

Output

Wednesday

---

Month Example

let month = 2;

switch(month)
{
    case 1:
        document.write("January");
        break;

    case 2:
        document.write("February");
        break;

    case 3:
        document.write("March");
        break;

    default:
        document.write("Invalid");
}

Output:

February

---

Importance of break

Without break, execution continues.

Wrong:

case 1:
    document.write("One");

case 2:
    document.write("Two");

Output:

OneTwo

---

Default Case

Executed when no case matches.

Example:

default:
    document.write("Invalid Choice");

---

Ternary Operator

A short form of if-else.

---

Syntax

condition
?
statement1
:
statement2;

---

Example

let age = 20;

let result =
(age >= 18)
?
"Eligible"
:
"Not Eligible";

document.write(result);

---

Output

Eligible

---

Dry Run

20 >= 18

true

First value selected

---

Largest Number Program

let a = 20;

let b = 10;

if(a > b)
{
    document.write("A is Larger");
}
else
{
    document.write("B is Larger");
}

Output:

A is Larger

---

Positive-Negative-Zero Program

let num = -5;

if(num > 0)
{
    document.write("Positive");
}
else if(num < 0)
{
    document.write("Negative");
}
else
{
    document.write("Zero");
}

Output:

Negative

---

Complete Practical Program

<!DOCTYPE html>

<html>

<body>

<script>

let marks = 72;

if(marks >= 80)
{
    document.write("Distinction");
}
else if(marks >= 60)
{
    document.write("First Division");
}
else if(marks >= 40)
{
    document.write("Pass");
}
else
{
    document.write("Fail");
}

</script>

</body>

</html>

---

Output

First Division

---

Flowchart of if-else

        Condition
             │
      ┌──────┴──────┐
      │             │
    True         False
      │             │
 Execute A     Execute B

---

Real-Life Applications

Conditional statements are used in:

• ATM systems

• Online shopping

• Banking applications

• Login systems

• Student result processing

• Ticket booking systems

Companies like Amazon, Google, and Microsoft use billions of conditional checks every day.

---

Common Mistakes Beginners Make

Using = Instead of ==

Wrong:

if(age = 18)

Correct:

if(age == 18)

---

Forgetting Curly Braces

Wrong:

if(age >= 18)

document.write("Eligible");

Better:

if(age >= 18)
{
    document.write("Eligible");
}

---

Missing break in switch

Can cause unexpected results.

---

Advantages of Conditional Statements

• Enable decision making

• Create intelligent programs

• Improve flexibility

• Handle different situations

• Essential for application logic

---

Conclusion

Conditional statements allow JavaScript programs to think and make decisions. They form the basis of almost every real-world application.