JavaScript: How conditionals influence your code?
Tags: javascript, webdev, programming, tutorial
Published: 2023-08-17 14:38:18

Everybody makes decisions all the time. These decisions impact our lives and bring change with each different choice we make. 
Conditionals are structures that offer you different results depending on the input you provide. Conditionals are the decision-makers of your code.

In this article we're going to cover: 
1. [If Statements](#if)
    - [If-else Statements](#if-else)
    - [Nested If else](#nested)
2. [Ternary Operator](#ternary)
3. [Switch Statement](#switch)
4. [Logical Operators with conditionals](#logical)
5. [Nullish Coalescing Operator](#nullish)


## <a id="if">If Statements</a>
We've previously learned about <a href="https://dev.to/fullstackjo/javascript-operators-145o">Operators</a>. For a decision to be made, comparison operators are combined with conditionals.
The `if` statement will execute only if the condition that was passed to it is true.
```javascript
let a = 2; 
if(a > 0) {
   console.log("a is greater than 0");
}

// the result: a is greater than 0
```
In this example, the `if` statement checks if `a` is greater than `0`. This expression `a > 0` returns a boolean value (true or false) and in our example the result is true.

### <a id="if-else">If else Statements</a>
Let's say you have a meeting with someone named "Greg". You're waiting for them in the meeting room, no one is allowed in that room except for Greg. The person at the door needs to make sure that the person who wants to attend the meeting is named Greg. When checking their `employeeID` they're gonna check for their name. **If** their name  is "Greg" then they're allowed to enter, **If** it is not which in this case would mean **else** then they won't be able to access the room.
```javascript
let name = "greg";
if(name == "greg") {
   console.log("this is greg. this person can attend the meeting");
} else {
  console.log("this is not greg. This person cannot attend the meeting");
}
```
### <a id="nested">Nested If else</a>
Nested `if-else` indicates the use of multiple `if-else` statements within each other. The nested `if else` allows more decisions to be made depending on multiple conditions. 

Checking if a number is greater or less than another is a great example to see how this works:
```javascript
let x = 12;

if (x > 10) {
    console.log("Number is greater than 10");

    if (x > 20) {
        console.log("Number is also greater than 20");
    } else {
        console.log("Number is not greater than 20");
    }
} else {
    console.log("Number is not greater than 10");
}
```
In our example we're checking if the number is greater than 10, which in our case it is. Since our expression `x > 10` is true, we're going to check if `x > 20 ` in the `inner if-else`. Since `x > 20` evaluates to false our result is going to be "Number not greater than 20".

If `x` was equal to `5` then the expression `x > 10` would have evaluated to false and our output would have been "Number not greater than 10".

## <a id="ternary">The Ternary Operator </a>
The ternary operator (`?`, `:` ) makes it possible for you to write a __simple__ conditional statement that can be expressed in a single line of code. 

```javascript
let employeeId = 15 

let message = employeeId == 15 ? "This is Greg": "This is not Greg";

console.log(message);
```
In This example we are checking the `employeeId`. If this expression `employeeId == 15` returns `true` then The result will be "This is Greg". If it returns false meaning the `employeeId` is not equal to `15` then the result will be "This is not Greg".


## <a id="switch">Switch Statement</a>
The Switch Statement can be used instead of `nested if-else` statements. It provides a way to compare a value with other various values and executes the code of a matching case.

Let's look at the syntax: 

```javascript
switch(expression) {
  case a:
    // code
    break;
  case b:
    // code 
    break;
  default:
    // code
}
```
The switch statement will evaluate the expression passed inside the parentheses. The result of the evaluated expression will then be compared to all the cases we have. If a match is found the code of the matched case will be executed. If a match was not found the code block found in the default case will be executed. Here's an example: 
 
```javascript
let dayNumber = 3;
let dayName;

switch (dayNumber) {
    case 1:
        dayName = "Sunday";
        break;
    case 2:
        dayName = "Monday";
        break;
    case 3:
        dayName = "Tuesday";
        break;
    case 4:
        dayName = "Wednesday";
        break;
    case 5:
        dayName = "Thursday";
        break;
    case 6:
        dayName = "Friday";
        break;
    case 7:
        dayName = "Saturday";
        break;
    default:
        dayName = "Invalid day";
}

console.log("The day is:", dayName);
```
The result will be "The day is: Tuesday".

## <a id="logical">Logical Operators with conditionals</a>
In the previous article we got to know what are <a href="https://dev.to/fullstackjo/javascript-operators-145o#logic">Logical operators</a>. Let's see how we can use them with Conditionals.

```javascript
let age = 18;
let isMember = true;
let message;

if (age >= 60) {
    if (isMember) {
        message = "You are eligible for a senior discount.";
    } else {
        message = "You are eligible for a senior non-member discount.";
    }
} else {
    if (isMember) {
        message = "You are eligible for a regular member discount.";
    } else {
        message = "You are not eligible for any discounts.";
    }
}

console.log(message);

```

## <a id="nullish">Nullish Coalescing Operator</a>
The nullish coalescing operator (`??`) makes it possible for you to assign a default value to a variable that might be `null` or `undefined`. 
If the left-hand side operand is `null` or `undefined`, it returns the right-hand side operand, else it returns the left-hand side operand.

```javascript
let username = null;
let message = username ?? "John";

console.log(message); // result: "John"
```