Conditional Statements in JavaScript

JavaScript is used to create dynamic and interactive web applications. In many situations, a program needs to make decisions based on certain conditions.

For example:

• If a user is logged in, show their profile.
• If the user is not logged in, show the login page.
• If the marks are above 90, give Grade A.
• If the payment is successful, place the order.

To make these kinds of decisions, JavaScript provides conditional statements.

---

What are Conditional Statements?

Conditional statements are statements used to make decisions in a program based on whether a condition is true or false.

In simple words:

If a condition is true, execute one block of code. Otherwise, execute another block of code.

Real-World Example

Imagine you are going to a movie.

You have a ticket, so the theatre allows you to enter.

If you have a ticket
        ↓
Enter the theatre

We can represent the same decision using JavaScript:

let hasTicket = true;

if (hasTicket) {
    console.log("You can enter the theatre");
}

Output

You can enter the theatre

How did this output come?

The value of hasTicket is true.

Therefore, the condition inside if is satisfied, so JavaScript executes the code inside the { }.

---

Why Do We Use Conditional Statements?

Conditional statements are used whenever a program needs to make a decision.

For example, an e-commerce website may check:

Is the product available?
        ↓
      Yes → Place the order
      No  → Show "Out of Stock"

A banking application may check:

Is the balance sufficient?
        ↓
      Yes → Allow withdrawal
      No  → Show "Insufficient balance"

So, conditional statements allow a program to behave differently depending on the situation.

---

Conditional Statements Available in JavaScript

The main conditional statements in JavaScript are:

1. if statement
2. if...else statement
3. if...else if...else statement
4. Nested if statement
5. switch statement

Let's understand each one.

---

1. if Statement

The if statement is used when we want to execute a block of code only when a condition is true.

Syntax

if (condition) {
    // code to execute
}

Example

let age = 20;

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

Output

You can vote

How did this output come?

JavaScript checks the condition:

age >= 18

The value of age is 20.

So:

20 >= 18
   ↓
true

Since the condition is true, JavaScript executes:

console.log("You can vote");

---

Real-World Example

Imagine an online shopping website.

let productAvailable = true;

if (productAvailable) {
    console.log("You can buy this product");
}

Output

You can buy this product

How did this output come?

productAvailable is true.

Therefore, the if condition is true and the message is printed.

---

2. if...else Statement

The if...else statement is used when there are two possible outcomes.

If the condition is true, the if block executes.

If the condition is false, the else block executes.

Syntax

if (condition) {
    // code if condition is true
} else {
    // code if condition is false
}

Example

let age = 16;

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

Output

You cannot vote

How did this output come?

JavaScript checks:

16 >= 18
   ↓
false

Since the condition is false, the if block is skipped.

JavaScript executes the else block instead.

Therefore:

You cannot vote

---

Real-World Example

A login system can check whether the user has entered the correct password.

let passwordCorrect = false;

if (passwordCorrect) {
    console.log("Login successful");
} else {
    console.log("Incorrect password");
}

Output

Incorrect password

How did this output come?

passwordCorrect is false.

Therefore, the if block is not executed and the else block runs.

---

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

The if...else if...else statement is used when there are multiple conditions to check.

Syntax

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

JavaScript checks the conditions from top to bottom.

As soon as it finds a condition that is true, that block is executed and the remaining conditions are skipped.

Example

let marks = 75;

if (marks >= 91 && marks<=100) {
    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

How did this output come?

JavaScript checks the conditions one by one:

marks >= 90
75 >= 90
   ↓
false

So JavaScript moves to the next condition:

marks >= 75
75 >= 75
   ↓
true

Therefore, JavaScript executes:

console.log("Grade B");

Once this condition is true, JavaScript does not check the remaining else if conditions.

---

Real-World Example

A school grading system can use multiple conditions:

90 - 100 → Grade A
75 - 89  → Grade B
50 - 74  → Grade C
Below 50 → Fail

This is a good situation for if...else if...else.

---

4. Nested if Statement

When an if statement is written inside another if statement, it is called a nested if statement.

Example

let age = 25;
let hasLicense = true;

if (age >= 18) {

    if (hasLicense) {
        console.log("You can drive");
    }

}

Output

You can drive

How did this output come?

JavaScript first checks:

age >= 18
25 >= 18
   ↓
true

Because the first condition is true, JavaScript enters the first if.

Then it checks the second condition:

hasLicense
   ↓
true

Both conditions are true, so JavaScript prints:

You can drive

Real-World Example

Consider an online exam system.

First, the system checks whether the student is logged in.

If the student is logged in, it then checks whether the student has permission to take the exam.

let isLoggedIn = true;
let hasPermission = true;

if (isLoggedIn) {

    if (hasPermission) {
        console.log("You can start the exam");
    }

}

Output

You can start the exam

How did this output come?

First:

isLoggedIn
    ↓
true

So JavaScript enters the first if.

Then:

hasPermission
    ↓
true

So JavaScript executes:

console.log("You can start the exam");

---

5. switch Statement

The switch statement is used when we want to compare one value with multiple possible values.

Syntax

switch (value) {

    case value1:
        // code
        break;

    case value2:
        // code
        break;

    default:
        // code
}

Example

let day = 2;

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

Tuesday

How did this output come?

The value of day is 2.

JavaScript compares day with each case:

case 1 → 2 === 1 → false
case 2 → 2 === 2 → true

So case 2 executes:

console.log("Tuesday");

Then JavaScript reaches:

break;

The break statement stops the switch and exits from it.

---

What Happens If We Don't Use break?

The break statement is commonly used inside switch to stop execution after the matching case.

Let's understand the difference.

With break

let day = 2;

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

Tuesday

Why?

day is 2, so case 2 matches.

case 2
   ↓
Tuesday
   ↓
break
   ↓
Exit switch

Therefore, case 3 and default are not executed.

---

Without break

Now let's remove the break statements.

let day = 2;

switch (day) {

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

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

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

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

Output

Tuesday
Wednesday
Invalid day

Why?

day is 2.

JavaScript finds the matching case 2.

It prints:

Tuesday

But there is no break, so JavaScript continues executing the following cases.

case 2
   ↓
Tuesday
   ↓
No break
   ↓
case 3
   ↓
Wednesday
   ↓
No break
   ↓
default
   ↓
Invalid day

This behavior is called fall-through.

So, normally, we use break after each case when we want only the matching case to execute.

---

Real-World Example of switch

Imagine a food ordering application.

The user selects a food item using a number:

1 → Pizza
2 → Burger
3 → Pasta
4 → Sandwich

We can use switch:

let choice = 2;

switch (choice) {

    case 1:
        console.log("Pizza selected");
        break;

    case 2:
        console.log("Burger selected");
        break;

    case 3:
        console.log("Pasta selected");
        break;

    case 4:
        console.log("Sandwich selected");
        break;

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

Output

Burger selected

How did this output come?

The value of choice is 2.

JavaScript finds:

choice === 2
       ↓
case 2 matches
       ↓
Burger selected
       ↓
break
       ↓
Exit switch

So only "Burger selected" is printed.

---

if...else vs switch

Both if...else and switch can be used for decision-making, but they are useful in different situations.

if...else

Use if...else when you need to check conditions or ranges.

let marks = 85;

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

Here we are checking ranges, so if...else if...else is suitable.

switch

Use switch when you are comparing one value against specific possible values.

let day = 2;

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

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

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

Here we are checking specific values such as 1, 2, and 3, so switch is suitable.

---

Summary

Conditional statements allow JavaScript programs to make decisions based on conditions.

The main conditional statements are:

Conditional Statement	When to Use
if	When you have one condition
if...else	When you have two possible outcomes
if...else if...else	When you have multiple conditions
Nested if	When one condition needs to be checked inside another condition
switch	When one value needs to be compared with multiple possible values

Simple Way to Remember

One condition
     ↓
   if

Two possible outcomes
     ↓
 if...else

Multiple conditions
     ↓
if...else if...else

One condition inside another
     ↓
 Nested if

One value with multiple fixed choices
     ↓
  switch

Conditional statements are one of the most important concepts in JavaScript because they allow programs to make decisions and perform different actions depending on the situation.