JavaScript: How conditionals influence your code?

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-else Statements
   • Nested If else
2. Ternary Operator
3. Switch Statement
4. Logical Operators with conditionals
5. Nullish Coalescing Operator

If Statements

We've previously learned about Operators. 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.

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.

If else Statements

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.

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

Nested If else

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:

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".

The Ternary Operator

The ternary operator (?, : ) makes it possible for you to write a simple conditional statement that can be expressed in a single line of code.

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".

Switch Statement

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:

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:

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".

Logical Operators with conditionals

In the previous article we got to know what are Logical operators. Let's see how we can use them with Conditionals.

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);

Nullish Coalescing Operator

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.

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

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

Comments

[Kudzai Murimi]

Well-explained!

[The daily developer]

thank you!

[Pradumna Saraf]

Great explanation. Keep them coming

[The daily developer]

thank you so much!!!

[Ghulam Ammar Yanuar]

Great Explanation!
But i little confused about Nullish coalescing operator. Why the result is "Guest" ? it supposed to be "John" right ?

Thanks for helping me 🙂

[The daily developer]

you are right! it is a typo on my end thank you for pointing it out!