Understanding Conditional Expressions in JavaScript

Introduction

Conditional expressions are like decision-makers in programming. They help us decide whether to run a set of instructions or not, depending on specific conditions. It’s like having a set of rules for your code to follow: if a condition is met, do this; otherwise, do something else.

In JavaScript, there are three types of conditional expressions: if, if…else, and if…else if…else statements. In this blog post, we will explore each of these statements and understand how they work.

The if Statement

The if statement is the simplest form of a conditional expression in JavaScript. It allows us to execute a block of code if a certain condition evaluates to true. 

let age = parseInt(prompt("What's your age?"));

if (age > 0) { 
    alert("This is valid age")
}

 In the above code, we use the `prompt()` function to ask the user for their age and store it in the `age` variable. We then use the if statement to check if the age is greater than 0. If it is, we display an alert message saying “This is a valid age.” It’s important to note that the value entered by the user through `prompt()` is always treated as a string. If we want to treat it as a number, we can use the `parseInt()` function to convert it into integer.

The if…else Statement

The if…else statement allows us to execute different blocks of code based on whether a condition is true or false. If the condition specified in the if statement is true, the code inside the if block is executed. If the condition is false, the code inside the else block is executed.

Let’s modify our previous example to include an else statement:

let age = parseInt(prompt("What's your age?"));

if (age > 0) {
    alert("This is a valid age.");
} else {
    alert("This is a valid age.");
}

In this code, if the user enters a negative age or 0, the else block will be executed and an alert message saying “This is an invalid age.” will be displayed.

The if…else if…else Statement

The if…else if…else statement allows us to check multiple conditions and execute different blocks of code based on each condition. It is used when we have multiple possible outcomes. Each condition is evaluated in order, and as soon as one of the conditions is true, the corresponding code block is executed, and the rest of the conditions are skipped. If none of the conditions are true, the code inside the else block is executed.

Let’s extend our previous example to include an additional condition:

let age = parseInt(prompt("What's your age?"));

if (age < 0) {
    alert("This is an invalid age.");
} else if (age < 9) {
    alert("You are a kid and cannot think of driving.");
} else if (age >= 9 && age < 18) {
    alert("You are a kid and can think of driving after 18.");
} else {
    alert("You can now drive as you are above 18.");
}

In this code, if the user enters an age less than 0, the first condition is true, and the corresponding message is displayed. If the age is between 0 and 9, the second condition is true, and the corresponding message is displayed. If the age is between 9 and 18, the third condition is true, and the corresponding message is displayed. If none of the conditions are true, the else block is executed, and the message “You can now drive as you are above 18.” is displayed.

Conclusion

Conditional expressions are a fundamental concept in programming, and understanding how to use them effectively is crucial for writing efficient and readable code. In this blog post, we explored the three types of conditional expressions in JavaScript: if, if…else, and if…else if…else statements.

We saw how each statement allows us to control the flow of our program based on different conditions. By using conditional expressions, we can create dynamic and interactive applications that respond to user input and make decisions based on specific criteria.