- Janarthanan Soundararajan
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!