Smart Way to Handle Conditional Statement in JavaScript.

In the past decade, JavaScript has immense growth. It grew as one of the widely used general-purpose programming languages. Instead of using only the 'If' statement, there are some of the excellent ways we can write the conditional statements in JavaScript.

Use Ternary Operator in Assignment of Variables

The ternary operator is best suitable for assign a value to a variable with certain conditions. By using this syntax helps to reduce the number of lines drastically and looks modern.

let a = 10;
let b = 15;
let valueStatusOne;

// Using if statement
if (a > b) {
    valueStatusOne="a is greater than b";
} else { 
    valueStatusOne="b is greater than a";
}

// Using Ternary Operator
const valueStatusTwo = a > b ? "a is greater than b" : "b is greater than a";

// Assign null if string value is empty
let stringValue = "";
let stringValueStatusOne;

// Using if statement
if(stringValue) {
    stringValueStatusOne = stringValue;
} else {
    stringValueStatusTwo = null;
}

// Using Ternary Operator
const stringValueStatusTwo = stringValue ? stringValue : null;

Logical OR Operator

The '||' operator will execute a statement if any one of the provided condition is true. We can use this operator in the assignment of the variable more smart way.

let stringValue = "";

// Using Ternary Operator
const statusOne = stringValue ? stringValue : null;

// Using OR Operator
const statusTwo = stringValue || null;

I know, the above snippet doesn't seem more impressive. But the following will give you insights.

let stringValueOne = "";
let stringValueTwo = "";

// Using Ternary Operator
const statusOne = stringValueOne ? stringValueOne : stringValueTwo ? stringValueTwo : null;
console.log(statusOne);
// null

// Using OR Operator
const statusTwo = stringValueOne || stringValueTwo || null;
console.log(statusTwo);
// null

Now you can see using OR operator is cleaner than the ternary operator.

Logical AND Operator

Sometimes, we don't need the else part of the ternary operator. We can write the 'If' statement without the else part, but we can write better than that using the '&&' operator.

 let fruitName = "Lemon";
 
 // if statement
 if (fruitName) {
     console.log(fruitName);
 }
 // Lemon
 
 // AND operator
 fruitName && console.log(fruitName);
 // Lemon

In frameworks like React logical AND operator used for conditional rendering.

// Using ternary operator
<div>
    { fruitName !== "" ? (
        <p>{fruitName}</p>
    ): null }
</div>

// Using AND operator
<div>
    { fruitName !== "" && <p>{fruitName}</p> }
</div>

It may give unexpected results if not write the proper syntax for conditions.

Optional Chaining

Optional chaining helps to prevent writing nested conditions to handle the undefined in JavaScript. It is a new syntax for JavaScript.

let data = {
    fruits: {
        favoriteFruit: "Orange"
    }
}

// before
data.fruits ? data.fruits.favoriteFruit ? 
    console.log(data.fruits.favoriteFruit) : null : null;
// Orange

// after
data?.fruits?.favoriteFruit ? 
    console.log(data.fruits.favoriteFruit) : null;

---

Thank you for reading!