Javascript If-Else Shortcut Ternary Operator
The Ternary Operator shortens the if-else condition. However, it can be a little more difficult to understand. Here are some examples of the shortcut if-else, i.e. ternary operator.
Exlanation for the ternary operator if-else shortcut. The ternary operator requires three operands, the conditional statement, the expression if true, and the expression if false.
The format of the ternary operator is: Variable = Conditional Statement ? True Expression : False Expression. If the Conditional Statement evaluates to True, the True Expression is returned. Otherwise (Else) the False Expression is returned.
Method 1 - Basic Format for the Shortcut If-Else Ternary Operator: Variable = Condition ? True : False;
gender = "girl";
reveal = (gender == "girl") ? ("It's a girl!") : ("It's a boy!");
Note, the parenthesis are not necessary but are added in above example for clarity. It can also be written:
reveal = gender == "girl" ? "It's a girl!" : "It's a boy!";
Result:
reveal == "It's a girl!"
// Comparing the shortcut ternary operator to if-else, it is the same as:
if (gender == "girl") {
reveal = "It's a girl!";
} else {
reveal = "It's a boy!";
}
// Comparing the shortcut ternary operator to switch-case, it is the same as:
switch (gender) {
case "girl" :
reveal = "It's a girl!";
break;
default :
reveal = "It's a boy!";
}
Multiple conditions using the shortcut ternary operator chained:
The ternary operator can handle as many conditions as you want. This operates in a similar way to the if-else-if-else-if-else ...
The format is like this:
condition1 ? value 1 // if
: condition 2 ? value 2 // if-else
: condition 3 ? value 3 // if-else
: condition 4 ? value 4 // if-else
...
: value n; // else
Example:
breed = "Siamese";
cat = breed == "Russian Blue" ? "This cat is a Russian Blue!"
: breed == "Abyssinian" ? "This cat is an Abyssinian!"
: breed == "Burmese" ? "This cat is a Burmese!"
: breed == "Siamese" ? "This cat is a Siamese!"
: breed == "Persian" ? "This cat is a Persian!"
: "This cat is a Heins 57!";
Result:
cat == "This cat is a Siamese!"
// Comparing the chained shortcut ternary operator to multiple if-else conditions, it is the same as:
if (breed == "Russian Blue") {
cat = "This cat is a Russian Blue!";
} else if (breed == "Abyssinian") {
cat = "This cat is an Abyssinian!";
} else if (breed == "Burmese") {
cat = "This cat is a Burmese!";
} else if (breed == "Siamese") {
cat = "This cat is a Siamese!";
} else if (breed == "Persian") {
cat = "This cat is a Persian!"
} else {
cat = "This cat is a Heins 57!";
}
// Comparing the chained shortcut ternary operator to multiple switch-case conditions, it is the same as:
switch (breed) {
case "Russian Blue" :
cat = "This cat is a Russian Blue!";
break;
case "Russian Blue" :
cat = "This cat is an Abyssinian!";
break;
case "Abyssinian" :
cat = "This cat is a Burmese!";
break;
case "Burmese" :
cat = "This cat is a Burmese!";
break;
case "Siamese" :
cat = "This cat is a Siamese!";
break;
case "Persian" :
cat = "This cat is a Persian!";
break;
default :
cat = "This cat is a Heins 57!";
}