JavaScript Conditional Statements

In real life, we make decisions all the time.

For example:

• If it is raining, take an umbrella.

• If your score is above 40, you pass.

• If the user is logged in, show the dashboard.

• Otherwise, show the login page.

Programs also need to make decisions based on different conditions. In JavaScript, we use conditional statements for this.

What are Conditional Statements?

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

For example:

let age = 20;

if (age >= 18) {
    console.log("You are an adult.");
}

Since age >= 18 is true, JavaScript executes the code inside the if block.

Output:

You are an adult.

if Statement

The if statement is the simplest conditional statement in JavaScript.

Syntax

if (condition) {
    // code to execute
}

For example:

let temperature = 35;

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

Output:

It is hot today.

If the condition is false, JavaScript simply skips the code inside the if block.

let temperature = 20;

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

Nothing will be printed because the condition is false.

if...else Statement

What if we want to execute one block when the condition is true and another block when it is false?

That's where if...else comes in.

Syntax

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

Example:

let age = 16;

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

Output:

You cannot vote yet.

Only one of the two blocks will execute.

if...else if...else

Sometimes we have more than two possibilities.

For example, suppose we want to assign a grade based on a student's marks.

let marks = 75;

if (marks >= 90) {
    console.log("Grade A+");
} else if (marks >= 80) {
    console.log("Grade A");
} else if (marks >= 70) {
    console.log("Grade B");
} else if (marks >= 60) {
    console.log("Grade C");
} else {
    console.log("Grade F");
}

Output:

Grade B

JavaScript checks the conditions from top to bottom.

As soon as it finds a condition that is true, it executes that block and skips the remaining conditions.

Multiple Conditions

We can combine conditions using logical operators such as && and ||.

Using &&

Suppose a user needs to be at least 18 and have a valid license.

let age = 20;
let hasLicense = true;

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

Both conditions must be true.

Using ||

Suppose a shop offers a discount if the customer is a student or a senior citizen.

let isStudent = false;
let isSenior = true;

if (isStudent || isSenior) {
    console.log("Discount available.");
}

Here, only one condition needs to be true.

Nested if Statements

An if statement can also be placed inside another if statement. This is called a nested if.

For example:

let age = 20;
let hasLicense = true;

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

The inner if is checked only if the outer condition is true.

Nested conditions can be useful, but don't overuse them. If the logic becomes too deeply nested, the code can become difficult to read.

switch Statement

When we need to compare one value against several possible values, a switch statement can sometimes make the code cleaner.

Syntax

switch (value) {
    case value1:
        // code
        break;

    case value2:
        // code
        break;

    default:
        // code
}

For 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

Why do we use break?

The break statement tells JavaScript to stop the switch after a matching case is executed.

Without break, JavaScript can continue executing the following cases. This behavior is called fall-through.

The default case runs when none of the cases match.

Ternary Operator

For very simple conditions, JavaScript provides the ternary operator.

Its syntax is:

condition ? valueIfTrue : valueIfFalse;

For example:

let age = 20;

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

console.log(result);

Output:

Adult

This is basically a shorter way of writing:

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

The ternary operator is useful for short and simple decisions, but for complex logic, regular if...else statements are usually easier to read.

Truthy and Falsy Values

JavaScript doesn't always require a condition to literally be true or false.

For example:

let name = "John";

if (name) {
    console.log("Name exists.");
}

Output:

Name exists.

JavaScript treats many values as truthy or falsy when used in a condition.

Some common falsy values are:

false
0
""
null
undefined
NaN

For example:

let name = "";

if (name) {
    console.log("Name exists.");
} else {
    console.log("Name is empty.");
}

Output:

Name is empty.

We'll explore truthy and falsy values more as we work with JavaScript conditions.

A Practical Example

Let's create a simple login check:

let username = "John";
let password = "1234";

if (username === "John" && password === "1234") {
    console.log("Login successful.");
} else {
    console.log("Invalid username or password.");
}

Output:

Login successful.

Here we're combining:

• if...else for decision-making

• === for comparison

• && to require both conditions to be true

This type of logic is used everywhere in real applications.

if...else vs switch vs Ternary

Conclusion

Conditional statements allow JavaScript programs to make decisions instead of simply executing every line from top to bottom.

The main options you'll use are:

if
if...else
if...else if...else
switch
ternary operator

Once you understand conditions, your programs can start behaving intelligently—for example, checking user input, validating data, or deciding what should happen next.