The if statement in JavaScript is a fundamental control structure that allows you to execute a block of code only if a specified condition evaluates to true. It is the basic building block for decision-making in your code.

Syntax

The basic syntax of an if statement is:

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

How It Works

1. Condition Evaluation: The condition inside the parentheses is evaluated. It must be an expression that returns a boolean value (true or false).
2. Code Execution: If the condition evaluates to true, the block of code inside the curly braces {} is executed. If the condition evaluates to false, the code inside the curly braces is skipped.

Example

let temperature = 30;

if (temperature > 25) {
  console.log('It is hot outside');
}

• Explanation:
  • Here, the condition is temperature > 25.
  • Since temperature is 30, which is greater than 25, the condition evaluates to true.
  • The message 'It is hot outside' is logged to the console.

Key Points

1. Boolean Expression: The condition in an if statement is typically a boolean expression or an expression that evaluates to a boolean value.

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

2. Truthiness: In JavaScript, any value can be evaluated in a boolean context. Values such as 0, null, undefined, NaN, '' (empty string), and false are considered falsy. All other values are considered truthy.

   let value = 'Hello';
   if (value) {
     console.log('The value is truthy');
   }
   

3. Nested if Statements: You can nest if statements inside each other to handle more complex conditions.

   let age = 20;
   
   if (age >= 18) {
     if (age >= 21) {
       console.log('You can drink alcohol.');
     } else {
       console.log('You are an adult but cannot drink alcohol.');
     }
   }
   

4. Short-Circuiting: When using logical operators with if statements, JavaScript uses short-circuit evaluation, meaning that the second condition is only evaluated if necessary.

   let isMember = true;
   let discount = isMember && 0.1; // 0.1 if isMember is true, otherwise false
   
   if (discount) {
     console.log('Discount applied:', discount);
   }
   

Practical Examples

1. Basic Condition

   let age = 15;
   if (age < 18) {
     console.log('You are a minor.');
   }
   

   • This example prints a message if age is less than 18.

2. Checking User Input

   let userInput = prompt('Enter a number:');
   if (userInput > 10) {
     console.log('The number is greater than 10');
   }
   

   • This code checks if the user input is greater than 10 and logs a message accordingly.

3. Form Validation

   let username = 'JohnDoe';
   if (username === '') {
     console.log('Username cannot be empty.');
   }
   

   • This checks if the username is an empty string and provides a validation message if true.

Summary

• The if statement is used to execute code based on a condition.
• It evaluates the condition and runs the code block only if the condition is true.
• It can be used alone or in combination with else and else if for more complex decision-making.
• Understanding how to use if statements effectively allows you to control the flow of your program and handle different scenarios based on conditions.