Skip to main content

If...Else Statement

The if...else statement is used to execute a block of code based on a condition. It allows you to specify two blocks of code: one block to execute if the condition is true, and another block to execute if the condition is false.

Before we dive into the syntax and examples, let's understand the basic structure of the if...else statement:

  • The if keyword is followed by a condition enclosed in parentheses ( ).
  • If the condition evaluates to true, the code block inside the if statement is executed.
  • If the condition evaluates to false, the code block inside the else statement is executed.

Here is the basic syntax of the if...else statement:

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

Condition and Expression​

Understanding the condition and expression in the if...else statement is crucial. The condition is an expression that evaluates to a boolean value (true or false).

Here are some examples of conditions and expressions:

  • x > 5: The condition checks if the variable x is greater than 5.
  • y === 0: The condition checks if the variable y is equal to 0.

Basically to obtain an expression, you can use comparison operators like >, <, >=, <=, ===, !==, etc. and these kinds of expression will return a boolean value enabling them to be used in the if...else statement.

It is important to note that the else block is optional. If you only want to execute code when the condition is true, you can omit the else block. Here is a quick example:

positive.js
let num = 5;
if (num > 0) {
  console.log("The number is positive");
}

Also, Understand that code inside the if block will only execute if the condition is true. If the condition is false, the code inside the else block will not execute at all and will get skipped by the JavaScript interpreter. Here is an example:

skipped-condition.js
let num = -5;
if (num > 0) {
  console.log("The number is positive");
  console.log("The If condition was false and will never print code inside this block");
}
console.log("This line will always execute");

Concept of Code Block​

In JavaScript, a code block is a set of statements enclosed in curly braces { }. The code block can contain one or more statements that are executed sequentially. In the if...else statement, the code block inside the if or else statement is executed based on the condition.

Although, sometimes you can write your code without the curly braces { } if you have only one statement to execute. For example:

single-statement.js
let num = 5;
if (num > 0)
  console.log("The number is positive");
else
  console.log("The number is negative");
tip

Make sure to indent your code properly to improve readability and maintainability. It is a good practice to always use curly braces {} to enclose the code block, even if you have only one statement to execute.

Examples of if...else Statements​

Let's look at some examples to understand how the if...else statement works in JavaScript.

Example 1: Checking if a Number is Positive​

In this example, we will use the if...else statement to check if a number is positive or negative.

positive-negative.js
let num = 5;
if (num > 0) {
  console.log("The number is positive");
} else {
  console.log("The number is negative");
}

In the example above, the condition num > 0 checks if the variable num is greater than 0. If the condition is true, the message "The number is positive" is displayed; otherwise, the message "The number is negative" is displayed.

Example 2: Greeting Based on Time​

In this example, we will use the if...else statement to greet the user based on the time of the day.

greeting.js
let hour = 10;
// If hour is between 0 and 11, it's morning
if (hour >= 0 && hour < 12) {
  console.log("Good Morning!");
}
// If hour is between 12 and 17, it's afternoon
else if (hour >= 12 && hour < 18) {
  console.log("Good Afternoon!");
} 
// If hour is between 18 and 23, it's evening
else {
  console.log("Good Evening!");
}

In the example above, the if...else statement checks the value of the variable hour and displays a greeting message based on the time of the day. This example also demonstrates the use of the else if statement to check multiple conditions. If the first condition is false, the else if statement is evaluated and if none of the conditions are true, the else block is executed. The code will print Good Morning! to the console.

Nested if...else Statements​

You can also nest if...else statements to create more complex conditions. However, nesting if...else statements can make the code less readable and harder to maintain. It is recommended to use nested if...else statements sparingly.

Here is an example of using nested if...else statements to check if a number is positive, negative, or zero:

positive-negative-zero.js
let num = 5;
if (num > 0) {
  console.log("Positive");
} else {
  if (num < 0) {
    console.log("Negative");
  } else {
    console.log("Zero");
  }
}

In the example above, the first if statement checks if num is greater than 0. If the condition is true, the message "Positive" is displayed. If the condition is false, the nested if statement checks if num is less than 0. If the condition is true, the message "Negative" is displayed. If both conditions are false, the message "Zero" is displayed.

In the next section, we will learn about the switch statement in JavaScript. Let's keep going! 🚀

Made with ❤️ by Fasakin Henry