JavaScript - Conditional Operator

What is the Conditional Operator? The Conditional Operator is sometimes called the Ternary...

What is the Conditional Operator?

The Conditional Operator is sometimes called the Ternary Operator or "question mark" operator. It is an operator that allows us to write theif ... elsestatement in a short and concise way. The operator is used with a question mark?hence the name "question mark" operator. The operator has three operands hence the name "ternary" operator.

Syntax and Example

Normally, you would write anif ... elsestatement the following way:

let value;

if (condition) {
 value = "true";
} else {
 value = "false";
}

With the Conditional operator, you can write the above code the following way:

// syntax -> condition ? operand2: operand3; 
let value = condition ? "true" : "false";

The first operand is the condition you want to evaluate, followed by a question mark (?). The second operand is the expression you wish to execute if the condition is "truthy" , followed by a colon (:). And lastly, the third operand is the expression to execute if the condition is "falsy" .

You can see that with the Conditional operator, you can neatly write anif ... elsestatement block into one line and assign it directly to a variable.

Nesting/Chaining

The Conditional operator is often used as an alternative toif ... elsestatement block because it is shorter to write, sometimes it is still better for code readability to useif ... elsestatements. That being said, you can use Conditional operator forif ... else if ... elsestatements as well.

For example:

function getAgeGroup(age) {
 if (age >= 18) {
 return "adult";
 } 
 else if (age >= 13) {
 return "adolescent";
 }
 else {
 return "child";
 }
}

Here we have a function that return the age terminology based on the parameter "age", the function evaluate the input argument withif ... else if ... elsestatement and return appropriate term.

function getAgeGroup(age) {
 return age >= 18 ? "adult" 
 : age >= 13 ? "adolescent" 
 : "child";
}

You can see that it much shorter, as for whether it is as readable, I will let you be the judge of that ????.

(Explanation: In the example, if the first condition is "truthy" it will return the string "adult", otherwise, it will move to the second condition and again check for "truthy" and return the string "adolescent". If the second condition is "falsy" then the string "child" will be returned.)

Summary

The Conditional Operator has three operands and can be used as an alternative toif ... elsestatement block. Itcanbe difficult to read so it should be used for simple cases. An example of my use case would be in React, where you can't useifcondition directly inside the JSX so you could use this conditional operator for conditional rendering.

Thank you for reading, please leave a comment if you found it helpful, or feedback if you found a mistake or would like to add to it.