A Comprehensive Guide on the use of If-Else Statement in JavaScript
Tags: javascript, webdev, beginners, tutorial
Published: 2023-04-21 10:34:36


## Introduction

`If-else` statement is a block of code that is executed when a particular condition is met. It is used to perform different actions based on different conditions, such that if a particular condition is true, a certain code should be executed else if the condition is false, another block of code should be executed or returned. The `if-else` statement can be used in many programming languages, such as JavaScript, MATLAB, C++, and Python, to name a few, but this article will walk you through the use of the `if-else` statement in JavaScript.
<p>&nbsp;</p>
## Basic Syntax of an `if-else` Statement

The `if-else` statement can be categorized into four parts, each with its own unique syntax. This includes;

- **The basic IF statement:**

The `if` statement specifies the block of code to be executed if the condition is met.

Syntax

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

```

### The `if-else` **statement:**

The `if-else` statement is simply the combination of the basic `if` statement and the `else` statement. The `else` in this case specifies the block of code to be executed if the condition is false or not met.

Syntax

```Javascript

if(condition){
// block of code to be executed if the condition is true
}
else{
// block of code to be executed if the condition is false
}



```

- **Else if statement:**

The `else-if` statement specifies a second condition if the first condition is false.

Syntax

```jsx
if(condition 1){
// block of code to be executed if the condition is true
}
else if(condition 2){
// block of code to be executed if the first condition is false and the second condition is true
}
else{
// block of code to be executed if both condition 1 and condition 2 are false
}

```

- **Nested if else statement:**

The `nested if-else` statement is simply having one `if` statement embedded in another `if` statement.

Syntax

```jsx
if(condition 1){
// block of code to be executed if condition 1 is true
}
if(condition 2){
//block of code to be executed if condition 1 is false and condition 2 is true
}
else{
// block of code to be executed if both condition 1 and condition 2 are false
}

```
<p>&nbsp;</p>
## Examples of an if else Statement in Action

```jsx
let SchoolProgress = prompt("have you finished primary school? yes/no", "")
if (SchoolProgress === "yes"){
    alert('congratulations, you can now proceed to secondary school')
    }
    else{
    alert("Pls go back to primary school")
    }

```

```jsx
let score = prompt ("enter your score", "");
if (score >= 70 && score <= 100){
    alert("your grade is A");
}
if(score >=60 && score <= 69){
    alert("your garde is B");
}
if(score >= 50 && score <= 59){
    alert("your grade is C");
}
if(score >= 45 && score <= 49){
    alert("your grade is D");
}
else {
    alert("i'm sorry but u failed");
}

```

```jsx
if (age == 18){
'you are eligible to vote'
}
else{
'you are too young to vote'
}
// output : 8 you are to young to vote
// output: 21 you are eligible to vote

```
<p>&nbsp;</p>
## Conditional/Ternary Operators

It is an operator that works as an alternative to the `if-else` statement. It takes in three operands`, one of` which is a condition, followed by a question mark `?` then a code to execute if the condition is true followed by a colon`:` then another code to execute if the condition is false.

The syntax can be written as:

```jsx
condition ? exprIfTrue : exprIfFalse
```

Example of a Ternary Operator

```jsx
const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Ber"

```
<p>&nbsp;</p>
## **Comparison Operators**

A comparison operator is used to compare or check the difference between two values and returns the answer as a Boolean, that is, True or False.Examples of the comparison operators are;`==` Equal to`===` Strict equal to`!=` Not equal to`!==` Strict not equal to`>`Greater than`<`Less than`>=` Greater than or equal to`<=` Less than or equal toNote: The difference between the `==` and `===` is that: the `==` converts the variable to the same type before performing a comparison, while the `===` does not do any type of conversion. It simply returns true if the variable types are the same.

 Example:

```jsx
2 == '2' // output: true
2 === '2' // output: false

```
<p>&nbsp;</p>
## **Logical Operators**

They perform logical operations between variables or values. Logical operators in JavaScript include;

- Logical `AND` which is denoted by `&&`The `AND` operator returns `true` if both values or operands are `true` else it returns `false`.
- Logical`OR` which is denoted by `||`The `OR` operator returns true if one of the values or operands is `true` else it returns `false`.
- Logical `Not` which is denoted by `!` The `NOT` operator returns `true` if the operand is `false` and returns `false` if the operand is `true`. Example:

```jsx
let a = 2, b = true and c = false
b || c // output True
b && c // output False
!b // output False

```
<p>&nbsp;</p>
## Differences between `If-else` Statements & Conditional Operators

The difference between the `if-else` statement and conditional operator is that the conditional operator is a single programming language that takes in three operands which is generally faster and shorter than the `if-else` statement which is a programming block in which statements come under the parenthesis. 

<p>&nbsp;</p>
## When to Use the `If-else` statement and Conditional Operators

`If-else` statements should be used instead of the ternary operators when you would like to have more than two outcomes, such as when writing an else if within your `if-else` statement. Generally, if you need to check more than one condition`,` the `if-else` statement is a better approach. On the other hand, the ternary operator should be used instead of the if-else statement whenever you would otherwise use a simple if-else statement. Generally, anything that can fit in a single line of code is a great time to use the ternary operator because it’s much more compact and easy to read. Ternary operators are also great when you want to set a value to a given variable.

<p>&nbsp;</p>
## Best Practices for Using `if-else` Statement

- **Avoid using nested statements:** The use of nested statements should be avoided while using the if else statement because this could make your code too clumsy as there will be too many braces and if any mistake is made in the process it could be difficult to debug.
- W**riting clear and concise code:** It is important to keep your code as brief as possible, this is to improve readability and Clarity.
- **Properly indenting code:** Indenting your `if else` statements is one of the best practices to consider and this can be achieved by installing the prettier extension in your Visual Studio code.
- **Avoid redundancy:** Do not repeat different blocks of codes with the same meaning. It creates room for redundancy.

<p>&nbsp;</p>
## Conclusion

The `if-else` statement in Javascript is used to check if a particular condition is met and it has proven to be one of the easiest methods used by programmers to check for certain conditions. The good part is that it doesn’t only apply to the JavaScript programming language but to many other programming languages. I’ll like you to give it a try and also remember to apply best practices while writing your code.