Skip to main content

Conditional Statement

What is a Conditional Statement?​

Conditional statements are the backbone of any programming language. It gives us the ability to execute different code blocks based on particular conditions. The most basic conditional statement is the if statement. In this article, we will learn about different types of conditional statements in JavaScript.

In JavaScript, a conditional statement is used to execute a block of code if a certain condition is true. JavaScript has various conditional statements that can be used to perform different operations based on different conditions.

  1. if statement
  2. switch statement

if statement​

The if statement is used to execute a block of code if a certain condition is true. The syntax of the if statement is as follows:

Syntax
if (condition) {
  // code block to be executed if the condition is true
}

img.png

There are multiple if variants that can be used in different scenarios:

  1. If
  2. If...else
  3. If...else if...else
  4. Nested if

if​

We use operators to compare values. For example, the > operator compares two values and returns true if the left operand is greater than the right operand, otherwise it returns false.

Comparison Operators

Many operators can be used to compare values. I discussed them in the Comparison Operator article, the previous article in this series. If you haven't read it yet, I recommend you read it.

Here is an example of how you can use an if statement in JavaScript:

Check if x is greater than 5
const x = 10;

if (x > 5) {
  console.log("x is greater than 5");
}

In this example, the if statement checks if the value of x is greater than 5. If it is, the code inside the curly braces is executed, and the message x is greater than 5 is printed to the console. If the condition is not true, the code inside the curly braces is skipped.

caution

The code inside the curly braces is executed only if the condition is true. If the condition is false, the code inside the curly braces is skipped.

Let's take a look at another example:

Compare two Strings
const username = "rizwan";

if (username === "rizwan") {
  console.log("Welcome, rizwan!");
}

if...else​

The if statement can be followed by an optional else statement, which executes a block of code if the condition is false. The syntax of the if...else statement is as follows:

const x = 3;

if (x > 5) {
  console.log("x is greater than 5");
} else {
  console.log("x is not greater than 5");
}

In this example, the code inside the else block is executed, because the condition x > 5 is not true.

if...else if...else​

You can also use an if, else if, or else statement to test multiple conditions:

const x = 3;

if (x > 5) {
  console.log("x is greater than 5");
} else if (x < 5) {
  console.log("x is less than 5");
} else {
  console.log("x is equal to 5");
}

In this example, the code inside the else if block is executed, because the condition x < 5 is true.

Nested if​

You can also nest an if statement inside another if statement. The code inside the inner if statement is executed only if the condition of the outer if statement is true:

const username = "rizwan";
const password = "123456";

// I am comparing username and password, with the following rules:
// - if username is "rizwan" and password is "123456", print "Login successful"
// - if username is "rizwan" and password is not "123456", print "Incorrect password"
// - if username is not "rizwan" and the password is "123456", print "Incorrect username"
// - if username is not "rizwan" and the password is not "123456", print "Incorrect username and password"

if (username === "rizwan") {
  if (password === "123456") {
    console.log("Login successful");
  } else {
    console.log("Incorrect password");
  }
} else {
  if (password === "123456") {
    console.log("Incorrect username");
  } else {
    console.log("Incorrect username and password");
  }
}

Nested-if statements are often used to test multiple conditions, depending on the result of a previous condition.

caution

The code inside the inner if statement is executed only if the condition of the outer if statement is true. If the condition of the outer if statement is false, the code inside the inner if statement is not executed.

Let's take a look at a more complex example:

const x = Math.floor(Math.random() * 10);
const y = Math.floor(Math.random() * 10);

// Math.random() returns a random number between 0 and 1
// Math.floor() rounds a number down to the nearest integer, e.g. Math.floor(1.5) returns 1

// I am going to compare x and y, with the following rules:
// - if x is greater than 2 and y is greater than 4, print "x is greater than 2 and y is greater than 4"
// - if x is greater than 2 and y is less than 4, print "x is greater than 2 and y is less than 4"
// - if x is greater than 2 and y is equal to 4, print "x is greater than 2 and y is equal to 4"
// - if x is less than 2 and y is greater than 4, print "x is less than 2 and y is greater than 4"
// - if x is less than 2 and y is less than 4, print "x is less than 2 and y is less than 4"
// - if x is less than 2 and y is equal to 4, print "x is less than 2 and y is equal to 4"
// - if x is equal to 2 and y is greater than 4, print "x is equal to 2 and y is greater than 4"
// - if x is equal to 2 and y is less than 4, print "x is equal to 2 and y is less than 4"
// - if x is equal to 2 and y is equal to 4, print "x is equal to 2 and y is equal to 4"

if (x > 2) {
  if (y > 4) {
    console.log("x is greater than 2 and y is greater than 4");
  } else if (y < 4) {
    console.log("x is greater than 2 and y is less than 4");
  } else {
    console.log("x is greater than 2 and y is equal to 4");
  }
} else if (x < 2) {
  if (y > 4) {
    console.log("x is less than 2 and y is greater than 4");
  } else if (y < 4) {
    console.log("x is less than 2 and y is less than 4");
  } else {
    console.log("x is less than 2 and y is equal to 4");
  }
} else {
  if (y > 4) {
    console.log("x is equal to 2 and y is greater than 4");
  } else if (y < 4) {
    console.log("x is equal to 2 and y is less than 4");
  } else {
    console.log("x is equal to 2 and y is equal to 4");
  }
}

So, now we have a better understanding of how to use nested if statements, and when which condition will be executed.

tip

Sometimes developers use AND (&&), and OR (||) operators to combine multiple conditions in a single if statement. For example:

const x = 3;
const y = 5;

if (x > 2 && y > 4) {
  console.log("x is greater than 2 and y is greater than 4");
}

I discussed AND (&&) and OR (||) operators in the Logical Operator article, the previous article in this series. If you haven't read it yet, I recommend you read it.

switch Statement​

It executes a block of code based on the value of a specific expression, often used as an alternative to the if-else statement, especially when you have multiple conditions to test.

Here is an example of how to use a switch statement in JavaScript:

const x = "apple";

switch (x) {
  case "apple":
    console.log("x is an apple");
    break;
  case "banana":
    console.log("x is a banana");
    break;
  default:
    console.log("x is neither an apple nor a banana");
}

In this example, the switch statement compares the value of x to the values specified in the case clauses.

  • If x is equal to apple, the code inside the first case block is executed, and the message x is an apple is printed to the console.
  • If x is equal to banana, the code inside the second case block is executed, and the message x is a banana is printed to the console.
  • If x is neither apple nor banana, the code inside the default block is executed, and the message x is neither an apple nor a banana is printed to the console.

The break statement is used to exit the switch statement and prevent the code in the following case blocks from being executed.

caution
Omitting the break Statement

If you omit the break statement, the code in the following case blocks will be executed.

const x = "apple";

switch (x) {
  case "apple":
    console.log("x is an apple");
  case "banana":
    console.log("x is a banana");
  default:
    console.log("x is neither an apple nor a banana");
}

If you omit the break statement, this will be the output:

x is an apple
x is a banana
x is neither an apple nor a banana

Because the first case block is executed, and it doesn't have a break statement, the code in the second case block is also executed. And because the second case block doesn't have a break statement, the code in the default block is also executed.

default is an optional block that is executed if none of the case clauses match the value of the expression.

switch statement vs if-else statement​

The switch statement can only be used to check for equality. You can't use it to check for inequalities, greater than, less than, etc.

If you need to check for inequalities, greater than, less than, etc., you should use an if-else statement instead.

Ternary Operator (Conditional Operator)​

? is called the ternary operator. It is a shorthand way to write an if-else statement. The syntax of the ternary operator is as follows:

Syntax
condition ? exprIfTrue : exprIfFalse;

Here is an example of how to use the ternary operator in JavaScript:

Check if x is greater than 5
const x = 10;

const result = x > 5 ? "x is greater than 5" : "x is not greater than 5";

console.log(result);

In this example, the ternary operator is used to assign the value of the result variable based on the value of x. If x is greater than 5, the value of the result variable is 'x is greater than 5'. If x is not greater than 5, the value of the result variable is 'x is not greater than 5'.

When to Use Ternary Operator

The ternary operator is often used as a shortcut for the if-else statement. However, it is not always the best choice, and you should consider using an if-else statement if you need more flexibility or control.

Conclusion​

In this article, we have learned about the if statement, switch statement, and ternary operator in JavaScript. We have also learned how to use them in our code.