Javascript If else and else if statements

Control flow is at the heart of programming, enabling developers to make decisions based on specific conditions. Among the most essential control flow tools are conditional statements like if, else, and else if. These are foundational concepts that appear in virtually every programming language, albeit with some syntactic differences.

In this lesson, you'll learn how to use conditional statements in JavaScript effectively to make your programs smarter and more

An if condition evaluates a specific condition. Based on the result of this evaluation, a particular decision is made.

  1. 1
    If the condition evaluates to true, certain actions or specific code will be executed.
  2. 2
    If the condition evaluates to false, a different set of actions or code will be executed instead.

Understanding the if Statement in JavaScript

Before diving into examples, let’s first understand how to create an if statement in JavaScript. This structure allows you to make decisions in your code based on certain conditions.

To create an if statement:

Start with the if keyword, followed by parentheses () where you write the condition you want to check between these parentheses.

After the condition, add curly braces {} to enclose the block of code that should execute if the condition is true.

Basic syntax

javascript
          if (condition) {
	// Execute this block if the condition is true
}

Example: A True Condition

javascript
          if (5 > 3) {
	console.log('5 greater than 3');
} // 5 is greater than 3

If you also want to specify what happens when the condition is false:

Use the else keyword followed by another pair of curly braces {}. Inside these braces, write the code to execute if the condition is false.

Basic syntax:

javascript
          if (condition) {
	// Execute this block if the condition is true
} else {
	// Execute this block if the condition is false
}

Example:

javascript
          if (3 > 5) { 
console.log('3 is greater than 5');
} else {
 console.log('3 is less than 5');
} // 3 is less than 5

Explanation: The if statement checks that 3 > 5. Since this condition is false, the code inside the if block is skipped.

The code in the else block is then run.

Example:

javascript
          let age = 16;
if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are not an adult");
} // You are not an adult

Conclusion of Conditional Statements

Handling Multiple Conditions with else if

When you need to test several conditions, you can use the else if statement. This allows for a series of conditions to be evaluated in order.

If the first condition is false, you can add another condition using the else if keyword.

Follow it with parentheses () containing the second condition you want to check.

Then add curly braces {} after the parentheses and place the block of code to execute if the second condition is true.

Basic syntax:

javascript
          if (condition1) {
  // Execute this block if condition1 is true
} else if (condition2) {
  // Execute this block if condition1 is false and condition2 is true
} else {
  // Execute this block if all conditions are false
}

Key Notes:

  1. 1
    If the first condition in the if statement is true, the code block inside its curly braces will execute, and the program will skip the rest of the conditions, including else if and else.
  2. 2
    If the first condition is false, the program will check the else if condition.
  3. 3
    If the else if condition is true, its corresponding code block will execute, and the program will skip else.
  4. 4
    If the else if condition is also false, the code block inside the else will execute.

Example:

javascript
          let grade = 85;

if (grade >= 90) {
  console.log("Excellent");
} else if (grade >= 75) {
  console.log("Good");
} else if (grade >= 50) {
  console.log("Pass");
} else {
  console.log("Fail");
} 

// Good

The condition grade >= 90 is false, but grade >= 75 is true, so the corresponding block executes.

*Note:* When the first condition evaluates to true, the block of code inside the curly brackets following the if statement will execute. All subsequent conditions, including else or else if, are ignored, even if they are also true.

**Example:**

javascript
          let age = 25;
if (age > 18) { 
console.log('You are an adult'); 
} else if (age == 25) {
 console.log('You are a student'); 
} else {
 console.log('You are neither an adult nor a student'); 
}

// You are an adult

Explanation:

  1. 1
    An if statement checks the value of age.
  2. 2
    The first condition age > 18 is evaluated. Since 25 is greater than 18, this condition is true. The block of code inside the curly brackets following the if executes.
  3. 3
    Although the second condition age == 25 is also true, it is skipped because the if statement has already executed the first matching block.
  4. 4
    The else block is also ignored, as the first condition was satisfied.

Nested if

You can place one if statement inside another to handle complex conditions. This is called a nested if statement.

*Example:* Checking age and ID for entry permission

javascript
          let age = 20;
let hasID = true;

if (age >= 18) {
	if (hasID) {
    	console.log("You are allowed to enter.");
	} else {
    	console.log("You need an ID to enter.");
	}
} else {
	console.log("You are too young to enter.");
}

// You are allowed to enter

Explanation:

  1. 1
    Outer if condition:Checks if the person is 18 or older age >= 18. If false, the program skips to the else block and prints You are too young to enter.
  2. 2
    Nested if condition:If the person is 18 or older, the program checks if they have an ID hasID. If true, the program prints You are allowed to enter. If false, it prints "You need an ID to enter.

Note: Nested Conditions: The second if is evaluated only if the first condition is true.

Conclusion of Conditional Statements

  1. 1
    if Statement: Executes a block if the condition is true.
  2. 2
    else Statement: Executes when the if condition is false.
  3. 3
    else if Statement: Adds additional conditions to check.
  4. 4
    Nested if: Enables decision-making with multiple levels of conditions.