Conditional Statement
Tags: webdev, javascript, beginners, programming
Published: 2023-05-31 19:00:00

## What is Conditional Statement?

Conditional statements are backbone of any programming language. It gives us the ability to execute different code blocks based on particular condition. 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](#if-statement)
2. [switch statement](#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:

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

There are multiple `if` tools that could be use in multiple scenarios:

1. if
2. if, else
3. if, else if, else if, ... , else
4. if, nested if ... else, else

### If

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

```js
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.

### 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:

```js
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`, `else` statement to test multiple conditions:

```js
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...else

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`:

```js
const x = 3;

if (x > 5) {
	if (x < 10) {
		console.log("x is greater than 5 and less than 10");
	}
}
```

In this example, the code inside the inner if statement is executed, because the condition of the outer if statement is `true`.

Note: 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.

## 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:

```js
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.

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

```js
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");
}
```

In this example, the code inside the default block is executed, because the break statement is omitted. The message `x is a banana` is printed to the console, even though the value of x is 'apple'.

`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

`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

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

```js
condition ? exprIfTrue : exprIfFalse;
```

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

```js
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'.

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.