JS If Statement

Introduction

In JavaScript, the if statement is a fundamental building block for controlling the flow of execution within your code. It allows you to execute different blocks of code based on whether a condition is true or false. This is incredibly useful for creating dynamic and interactive programs, handling user input, and implementing conditional logic. Understanding if statements is crucial for anyone learning JavaScript, as they’re the foundation for many more advanced concepts.

The Basic if Statement

The if statement checks a condition and executes a block of code only if that condition is true. Let's start with a simple example:

let age = 20;

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

In this code:

• let age = 20; declares a variable named age and assigns it the value 20.
• if (age >= 18) checks if the value of the age variable is greater than or equal to 18.
• { console.log("You are an adult."); } is the block of code that will be executed if the condition age >= 18 is true.
• else is the block of code that will be executed if the condition age >= 18 is false.
• { console.log("You are a minor."); } is the block of code that will be executed if the condition age >= 18 is false.

When you run this code, the output will be:

You are an adult.

because age is 20, which is greater than or equal to 18.

Nested if Statements

You can nest if statements to create more complex conditional logic. This means placing one if statement inside another.

let score = 75;

if (score >= 90) {
  console.log("Excellent!");
} else if (score >= 80) {
  console.log("Good");
} else if (score >= 70) {
  console.log("Fair");
} else {
  console.log("Needs improvement.");
}

Here, the code first checks if score is greater than or equal to 90. If it is, it prints "Excellent!". If it's not, it checks if score is greater than or equal to 80. If it is, it prints "Good". If it's not, it checks if score is greater than or equal to 70. If it is, it prints "Fair". Finally, if none of the above conditions are met, it prints "Needs improvement."

else if Statements

The else if statement provides a way to handle multiple conditions sequentially. It's like saying, "If the first condition is false, then check the next condition."

let score = 75;

else if (score > 80) {
  console.log("Excellent!");
} else if (score > 70) {
  console.log("Good");
} else {
  console.log("Fair");
}

In this example, the code first checks if score is greater than 80. If it is, it prints "Excellent!". If it's not, it checks if score is greater than 70. If it is, it prints "Good". If it's not, it checks if score is greater than or equal to 70. If it is, it prints "Fair". If none of the above conditions are met, it prints "Fair".

else Statements

The else statement is executed only if none of the preceding if or else if conditions are true. It's a useful way to provide a default action when no other conditions are met.

let score = 75;

else {
  console.log("Score is not available.");
}

In this case, the else block is executed because score is 75, which is not greater than or equal to 90. The output will be:

Score is not available.

if...else Statements

You can combine if and else statements to create more complex conditional logic.

let age = 20;

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

This code will print "You are an adult." because age is 20, which is greater than or equal to 18. It will not print "You are a minor." because age is 20, which is not greater than or equal to 18.

if...else Statements with Multiple Conditions

You can use multiple if statements within a single if statement to handle different conditions.

let score = 75;

if (score >= 90) {
  console.log("Excellent!");
} else if (score >= 80) {
  console.log("Good");
} else if (score >= 70) {
  console.log("Fair");
} else {
  console.log("Needs improvement.");
}

This code will print "Excellent!" because score is 90 or greater. It will print "Good" because score is 80 or greater. It will print "Fair" because score is 70 or greater. It will print "Needs improvement." because score is less than 70.

if...else Statements with Nested if Statements

You can nest if statements to create more complex conditional logic.

let score = 75;

if (score >= 90) {
  console.log("Excellent!");
} else if (score >= 80) {
  console.log("Good");
} else if (score >= 70) {
  console.log("Fair");
} else {
  console.log("Needs improvement.");
}

This code will print "Excellent!" because score is 90 or greater. It will print "Good" because score is 80 or greater. It will print "Fair" because score is 70 or greater. It will print "Needs improvement." because score is less than 70.

💡 Tip: Consider using switch statements for more complex conditional logic, especially when you have multiple possible values to check. switch statements are often more readable and easier to maintain than nested if statements.

🖥️ Try It Yourself

1. Create a JavaScript file: Open a text editor (like Notepad on Windows, TextEdit on Mac, or VS Code) and create a new file. Save it with a .js extension (e.g., if_statement.js).

2. Copy and paste the code: Copy the code examples above and paste them into your JavaScript file.

3. Run the code: Open your browser's developer console (usually by pressing F12). Then, type console.log("Your code here"); and press Enter. You should see the output of the console.log statements in the console.

4. Experiment: Modify the code to try different values for the variables and see how the output changes. Try changing the conditions to test different scenarios.