If Statement in JavaScript — Conditional Statement (1)

The if statement is one of the most important control structures in JavaScript, enabling conditional execution of code. It’s essential for creating interactive and dynamic applications, allowing your program to make decisions based on specific conditions. In this guide, we’ll cover the basics of the if statement, common patterns, and advanced usage, helping you write more efficient and readable JavaScript code.

In this section, we’ll cover the following topics:

What is an If Statement in JavaScript?

An if statement in JavaScript allows you to execute a block of code only if a certain condition is true. If the condition evaluates to true, the code inside the if block runs; if false, it is skipped. This decision-making capability is crucial for creating interactive functionality in web applications.

Basic Syntax of an If Statement

The basic structure of an if statement is simple:

if (condition) {
  // code to execute if the condition is true
}

The condition is evaluated as a Boolean value (true or false). If true, the code block inside the curly braces {} is executed.

Example:

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

This code checks if the age is 18 or greater, and if so, it prints "You are an adult.".

Using Else and Else If

When you need to check for multiple conditions, you can use else if to add more choices, and else to provide a fallback if none of the conditions are met.

Example:

let score = 85;

if (score >= 90) {
  console.log("A grade");
} else if (score >= 75) {
  console.log("B grade");
} else {
  console.log("C grade");
}

In this example, if the score is 90 or more, it prints "A grade". If not, it checks if the score is 75 or higher, and if neither condition is true, it prints "C grade".

Nested If Statements

A nested if statement is when you place one if statement inside another. This can be useful when you need to perform multiple levels of checks based on previous conditions.

Example:

let age = 22;
let hasID = true;

if (age >= 18) {
  if (hasID) {
    console.log("You are eligible to vote.");
  } else {
    console.log("You need an ID to vote.");
  }
} else {
  console.log("You are not old enough to vote.");
}

Here, the outer if checks if the person is old enough to vote, and the nested if further checks if they have an ID.

Combining If with Logical Operators (AND, OR)

You can combine multiple conditions in a single if statement using logical operators like && (AND) and || (OR).

• AND (&&): Both conditions must be true.
• OR (||): At least one condition must be true.

Example using AND:

let age = 25;
let hasLicense = true;

if (age >= 18 && hasLicense) {
  console.log("You are allowed to drive.");
}

Example using OR:

let isWeekend = true;
let hasFreeTime = false;

if (isWeekend || hasFreeTime) {
  console.log("You can relax!");
}

Both of these examples combine conditions to make a more complex decision.

Generating If Statement Code with AI Assistance

This case study shows how AI can help create validation logic for a signup form. Validating user input involves checking multiple conditions, and AI makes it faster and easier to write the necessary code.

Sample AI prompt:

Sample code output:

let username = "JohnDoe";
let password = "securepass123";

if (username.length < 5) {
  console.log("Username must be at least 5 characters.");
} else if (password.length < 8) {
  console.log("Password must be at least 8 characters.");
} else {
  console.log("Signup successful!");
}

Instructions to see the results:

To view the results, choose one of the following options:

• Copy the code above into a JavaScript file and run it using the Quokka.js extension in VS Code.
• Copy the code above and paste it into the console of your browser’s developer tools.

Change the username and password values to test how the logic works with different inputs.

Best Practices for If Statements

Writing clear, concise, and maintainable if statements is crucial for creating robust and readable JavaScript code. Here are some best practices to follow:

• Use Braces for Clarity: Always use curly braces {} to enclose the code block within an if statement, even if it's a single line. This improves readability and prevents potential errors when adding or modifying code later.
• Keep Conditions Simple and Readable: Avoid overly complex conditions within a single if statement. Break down long conditions into smaller, more manageable parts using helper variables or functions. This makes the logic easier to understand and debug.
• Use Descriptive Variable Names: Choose meaningful variable names that clearly indicate the purpose and condition they represent. This significantly improves code readability and maintainability.
• Avoid Deep Nesting: Excessive nesting of if statements can make code difficult to follow and maintain. Consider alternative approaches like early returns or refactoring nested conditions into separate functions to improve clarity.
• Comment Complex Logic: Add comments to explain the purpose and reasoning behind complex if statement logic, especially when it involves multiple conditions or less obvious checks. This helps others (and your future self) understand the code more easily.

By following these best practices, you can write if statements that are not only functionally correct but also clear, maintainable, and conducive to collaborative development.

Reference links:

If Statement on MDN