JavaScript If Else

While building websites or web apps, making decisions in the code is important for developers and users. JavaScript, which is one of the popular programming languages that is used in web development, allows you to handle different situations by using various tools. One of these tools is the if-else statement in JavaScript. It allows your code to execute one action if a condition is true, and a different action if it is false.

In this blog, you will learn how to use if and else in JavaScript, with the help of simple examples, and also understand the JavaScript if-else syntax and real-world use cases.

Table of Contents:

• JavaScript Conditional Statements
• The if Statement in JavaScript
• The if-else Statement in JavaScript
• The else if Statement in JavaScript
• The Nested if-else Statement
• JavaScript else if Real-World Example
• Ternary Operator Shortcuts
• switch Statement
• Logical Operators (&&, ||, !)
• Best Practices for Using JavaScript if-else
• Conclusion

JavaScript Conditional Statements

Conditional statements play an important role in programming because they allow you to make decisions based on different conditions. In JavaScript, there are multiple ways to write these conditions, like the if else statement in JavaScript, the JavaScript if-else-if structure, and the nested if else in JavaScript. These statements check the condition and execute a specific block of code based on the result (true or false).

For example, you may want to show a message to the user only if the user is logged into your application, or take a different action if they are not logged in. This will allow your programs to respond to different situations. That’s why the if-else condition in JavaScript is important.

The if Statement in JavaScript

The if statement is the most basic way to add decision-making to your JavaScript code. It runs a block of code if the given condition is found to be true, and if the condition is false, then the code written inside the if block is skipped and the remaining code, written after the if block, is executed.

For example, you can use JavaScript if statements for various purposes, like checking whether a user is logged in or not, if a score is high enough, or if an input field is empty. The if statement is the basis to learn more concepts like if else statement in JavaScript and JavaScript if-else-if structures.

Syntax:

if (condition) {
    // code to execute
}

Example: Finding whether the user’s age is greater than or equal to 18 or not?

Output:

Learn to Code Beautiful Websites

Join Today

Explore Program

The if-else Statement in JavaScript

The if-else statement in JavaScript is another way to make decisions in your code. It checks a condition, and if that condition is true, it runs one block of code (an if block). And if the condition is false, it runs a different block of code (else block). This is called a JavaScript if else block, and it’s found to be helpful when you want your program to choose between the two options.

Syntax:

if (condition) {
    // if block code
} else {
    // else block code
}

Example: Finding whether a student passes or fails in the examination.

Output:

The else if Statement in JavaScript

The JavaScript if…else if Statement is used when there is a need to check more than two conditions. It first starts with an if block, followed by one or more else if blocks, and ends with an else block. Here, each and every condition is checked one by one from top to bottom. When a true condition is found, that block runs, and the rest of the blocks are skipped. This structure is found to be useful when you have multiple conditions to check.

Syntax:

if (condition1) {
    // code
} else if (condition2) {
    // different code
} else {
    // fallback code
}

Example: Program to check the temperature condition.

Output:

The Nested if-else Statement

A nested if else statement in JavaScript means that placing one if or if-else statement inside another if statement. This is found to be helpful when you need to check multiple related conditions one after the other. For example, you may use a nested if statement in JavaScript to check two things – first is user is logged in or not, and the other is whether the user is an admin or not. In this case, one condition depends on another. Thus, using nested if-else statements is a good option.

Syntax:

if (condition1) {
    // code runs if condition1 is true
    if (condition2) {
        // code runs if condition2 is also true
    } else {
        // code runs if condition2 is false
    }
} else {
    // code runs if condition1 is false
}

Example: Program to check whether a user is logged in or not, and also the access they have (Admin or Student)

Output:

JavaScript else if Real-World Example

JavaScript if-else and else if statements play a very important role in building web and mobile applications. Let us take an example of a login system, where you want to display different messages based on the user’s roles:

Output:

Ternary Operator Shortcuts

In JavaScript, the ternary operator is a short way of writing an if...else statement.
It works in this format:

condition ? value_if_true : value_if_false;

• condition → The expression to check.
• value_if_true → Runs if the condition is true.
• value_if_false → Runs if the condition is false.

Example:

Output:

Here, if age >= 18 is true, "Adult" is stored in result; otherwise, "Minor" is stored.

Switch Statement

A switch statement in JavaScript is used when you want to compare one value against different possible cases. It works like multiple if...else if statements, but is often easier to read.

You give it a value, and it checks each case to see if it matches. If a match is found, the code inside that case runs. You can also use a default case to handle situations where no matches are found.

Syntax:

• switch → the keyword to start the statement.
• case → each possible value to check.
• break → stops checking further cases once a match is found.
• default → runs if no case matches.

Example:

Output:

In this example, the value 3 matches the case for "Wednesday", so that the code runs, and the program stops after the break.

Logical Operators

In JavaScript, logical operators are used to combine two or more conditions in an if statement. They help you decide what should happen when multiple conditions are true or false.

There are three main logical operators:

1. && (AND) – Returns true if both conditions are true.
2. || (OR) – Returns true if at least one condition is true.
3. ! (NOT) – Reverses the result, so true becomes false and false becomes true.

Example:

Output:

Best Practices for Using JavaScript if-else

The JavaScript if-else statement plays an important role in making decisions in your code. Here are some of the best practices that you need to follow while working with JavaScript if-else-if Statements:

• Write the conditions that are easy to understand.
• Avoid using too many nested if-else statements in the code.
• Always include an else block to handle unexpected cases when none of the previous conditions are met.
• Always try to add comments to your code.

Conclusion

Learning how to write if-else in JavaScript is an important step for controlling how your program works. Whether you’re a beginner, using simple if and else statements in JavaScript, or an experienced who writing more difficult nested if-else statements in JavaScript, these structures help you make decisions in your code. Understanding conditional statements in JavaScript is important for building efficient programs and implementing logic. If you want to learn more about JavaScript, explore our blog and enroll in our Web Development Course.

More Related Topics

• Learn How to Use If Else Statements in Java to Create Robust and Efficient Code
• if else Statement in C – Syntax and Examples

JavaScript If Else – FAQs