JavaScript Conditional Statements

By /

Sometimes a program needs to make a decision. For example, if the age is 18 or more, allow the user to continue. This is where Javascript conditional statements are used. Understand with some more example:

  • If the marks are 40 or more, show “Pass”.
  • If the password is correct, allow login.
  • If it is raining, you might take an umbrella.

JavaScript uses conditional statements to make these decisions.

The most common conditional statements are:

  • if
  • if...else
  • else if
  • switch

The if Statement

The if statement runs some code only when a condition is true.

Example: Using if

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript if Statement</title>
</head>
<body>

    <h1>JavaScript if Statement</h1>

    <script>
        let age = 18;

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

</body>
</html>

Output:

You can vote.

Here, JavaScript checks whether age >= 18 is true. Since the age is 18, the message is displayed. If the age was 15, the message would not be displayed.

The if…else Statement

You can use if...else when you want your program to choose between two options. If the condition is true, one block of code runs. If the condition is false, the else block runs.

Example: Check Pass or Fail

<!DOCTYPE html>
<html>
<head>
    <title>Pass or Fail</title>
</head>
<body>

    <h1>Pass or Fail</h1>

    <script>
        let marks = 65;

        if (marks >= 40) {
            console.log("You passed.");
        } else {
            console.log("You failed.");
        }
    </script>

</body>
</html>

Output:

You passed.

If marks were 30, the output would be:

You failed.

The else block runs when the if condition is false.

The else if Statement

Sometimes you need to check more than two conditions. For example, a student’s marks can decide whether they get Grade A, Grade B, Grade C, or fail. The else if statement lets you check these conditions one by one.

Example: Student Grade

<!DOCTYPE html>
<html>
<head>
    <title>Student Grade</title>
</head>
<body>

    <h1>Student Grade</h1>

    <script>
        let marks = 85;

        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 >= 40) {
            console.log("Grade C");
        } else {
            console.log("Fail");
        }
    </script>

</body>
</html>

Output:

Grade A

JavaScript checks the conditions from top to bottom. As soon as it finds a true condition, it runs that block and skips the remaining conditions.

Nested if

You can also put one if statement inside another if statement. This is called a nested if. It is useful when you need to check a second condition only after the first condition is true.

Example: Login Check

<!DOCTYPE html>
<html>
<head>
    <title>Nested if Example</title>
</head>
<body>

    <h1>Login Check</h1>

    <script>
        let username = "admin";
        let password = "1234";

        if (username === "admin") {
            if (password === "1234") {
                console.log("Login successful.");
            } else {
                console.log("Wrong password.");
            }
        } else {
            console.log("Wrong username.");
        }
    </script>

</body>
</html>

Output:

Login successful.

Here, JavaScript first checks the username. If the username is correct, it checks the password.

The switch Statement

When you need to check one value against several fixed options, switch can make your code easier to read. For example, you can use it to check a day such as Monday, Tuesday, or Friday and display a different message for each one.

Example: Using switch

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Switch</title>
</head>
<body>

    <h1>JavaScript Switch Statement</h1>

    <script>
        let day = "Monday";

        switch (day) {
            case "Monday":
                console.log("Start of the week.");
                break;

            case "Friday":
                console.log("Weekend is near.");
                break;

            case "Saturday":
            case "Sunday":
                console.log("It's the weekend.");
                break;

            default:
                console.log("It's a regular day.");
        }
    </script>

</body>
</html>

Output:

Start of the week.

The break statement stops the switch after a matching case is found.

The default block runs when none of the cases match.

if…else or switch?

Both can be useful, but they are usually used in different situations.

Use if...else when you are checking conditions such as:

age >= 18
marks >= 40
price > 500

Use switch when you are comparing one value against several specific values, such as:

Monday
Tuesday
Wednesday

A Simple Practical Example

Let’s combine conditions with user input.

The following program asks for a person’s age and tells whether they are a child, teenager, or adult.

<!DOCTYPE html>
<html>
<head>
    <title>Age Checker</title>
</head>
<body>

    <h1>Age Checker</h1>

    <script>
        let age = Number(prompt("Enter your age:"));

        if (age < 13) {
            console.log("You are a child.");
        } else if (age < 18) {
            console.log("You are a teenager.");
        } else {
            console.log("You are an adult.");
        }
    </script>

</body>
</html>

When you open the page, a box will ask you to enter your age.

For example, if you enter 15, the console will show:

You are a teenager.

The Number() function converts the value entered by the user into a number.

Key Points

  • Conditional statements help JavaScript make decisions.
  • if runs code when a condition is true.
  • if...else handles two possible situations.
  • else if checks multiple conditions.
  • A nested if is an if statement inside another if.
  • switch is useful for checking one value against several possible values.
  • break stops a switch case from continuing.
  • default runs when no switch case matches.

In the next chapter, we will look at JavaScript Loops and see how to repeat code without writing the same code again and again.

Frequently Asked Questions (FAQs)

Q1. What are JavaScript conditional statements?

JavaScript conditional statements allow a program to make decisions based on whether a condition is true or false. Common examples include if, if...else, else if, and switch.

Q2. What is the JavaScript if statement used for?

The JavaScript if statement runs a block of code only when a specified condition is true. For example, it can check whether a person’s age is 18 or more before allowing them to continue.

Q3. What is the difference between JavaScript if else and if?

JavaScript if else provides two possible paths. The if block runs when the condition is true, while the else block runs when the condition is false.

Q4. When should I use JavaScript else if?

JavaScript else if is useful when a program needs to check multiple conditions. For example, you can use it to assign different grades based on a student’s marks.

Q5. What is a JavaScript switch statement?

A JavaScript switch statement compares one value with several specific cases. It is useful when you need to check values such as days, menu choices, or other fixed options.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top