Using the Ternary Operator in JavaScript

The ternary operator can be used as an alternative to an if...else statement. Its minimal syntax can, in some cases, make your code easier to read, and its inline structure makes it particularly useful for conditional assignment.

Ternary operator syntax

The ternary operator has three operands. The first is a condition which is followed by a question mark. The next two operands are expressions separated by a colon. If the condition is truthy, then the first expression is executed, or if the condition is falsy, then the second expression is executed.

condition ? expressionIfTrue : expressionIfFalse;

The equivalent as an if...else statement would be:

if (condition) {
  expressionIfTrue;
} else {
  expressionIfFalse;
}

Conditional assignment

The ternary operator is particularly useful for conditional assignment. This is because you can initialize and assign a variable in a single statement. For example:

const msg = 1 > 2 ? "1 is greater" : "2 is greater";

If this assignment were made using an if...else statement, then you would need two assignment statements and so would not be able to use a const variable type.

let msg;
if (1 > 2) {
  msg = "1 is greater";
} else {
  msg = "2 is greater";
}

This is a case where the ternary operator has an advantage over the if...else statement. The conditional assignment is more concise and arguably more readable. It also enables the use of immutable variables, which can make your code more resilient.

Null checks

In scenarios where you're dealing with variables that might not have a defined value, it can be necessary to check that they have a defined value before using them. This is where you would use a null check. It's particularly important when you need to access properties of a variable, as attempting to access a property of a variable that is null or undefined will result in an error being thrown. Ternary operators are well suited to this task and can be implemented in a single line.

const exampleObject = { value: true };
exampleObject ? exampleObject.value : "Value not set";

If you tried to access a property on a variable that hadn't been defined, you would encounter the following error: TypeError: Cannot read properties of undefined.

Nested conditions

Ternary operators can be nested to check multiple conditions, similar to an if...else if...else statement. Here is an example of a nested ternary that implements the logic of a game of FizzBuzz.

i % 15 === 0
  ? console.log("FizzBuzz")
  : i % 3 === 0
  ? console.log("Fizz")
  : i % 5 === 0
  ? console.log("Buzz")
  : console.log(i);

The same example using an if...else if...else statement would look like this:

if (i % 15 === 0) {
  console.log("FizzBuzz");
} else if (i % 3 === 0) {
  console.log("Fizz");
} else if (i % 5 === 0) {
  console.log("Buzz");
} else {
  console.log(i);
}

The first condition checks if i % 15 is equal to zero. If it's true then FizzBuzz is logged to the console. If it's false, then the second condition is checked. This keeps on going until either all conditions are found to be false, which will result in the value of i being logged to the console, or until one of the conditions is found to be true.

Conclusion

As you can see, the ternary operator is a very versatile and handy operator that enables you to write code that's concise and readable. It has many uses in JavaScript and can assist you with creating applications that are resilient and robust. So next time you're writing JS code, consider how your code might benefit from using a ternary.