The Ternary Operator is Underrated

This deep dive explores the evolution of operators, starting with familiar arithmetic operators, moving through comparison operators, and culminating in logical operators that power computer "thinking."

The Ternary Operator is Underrated
Photo by Tersius van Rhyn / Unsplash

When first learning to code, the first operators you likely learned were arithmetic operators. These, quite obviously, are used to perform operations with arithmetic and are likely familiar from middle-school and elementary math. This class of operator includes the likes of:

  • + for adding
  • - for subtracting
  • * for multiplication
  • / for division
  • % and modulus for remainders (my favorite of the basic arithmetic operators!)

After learning those core operators, you may be introduced to more advanced arithmetic operators like increment ++, decrement --, or square **. Once you first use variables, you'll typically learn about =, which is the assignment operator, which can sometimes be combined with arithmetic operators such as in += that adds a value to a variable. Next, you'll discover that you often need to compare things. This is accomplished using:

  • == for equality
  • ! for not
  • > for greater than
  • and < less than

Depending on the language, you're likely to see combinations of these, such as <=, >=, ===, etc. Up until this point, you probably learned and used most of these as a child in school. Most of the remaining operators are called logical and bitwise operators. Logical operators are used to create Boolean expressions, and bitwise operators are used to modify bits. Bitwise operations are rare in most day-to-day programming; however, they are still very useful, especially when working with numbers. With the exception of the assignment operator, you will likely most commonly utilize what's known as logical operators in your programs since logic is what makes a computer "think."

Boolean Logical Operators

The basis for how computers work and "think" was invented long before even the most primitive programmable computers. What computer scientists refer to as logic is based on Boolean algebra, a branch of algebra created by its namesake, George Boole where the only inputs and outputs are true and false. It turns out that this type of mathematics can easily be modeled using electrical components since true or false can be assigned to mean the presence or lack of electricity. This electricity is read as what's called a bit, which is either true or false. Bits then makeup bytes and so on, which can be used to encode programmed logic.

Portrait of Boole, fromThe Illustrated London News, 21 January 1865

Three core logical operators are derived from Boolean algebra that you should know about:

  • && which is AND and returns true if both operands are true
  • || which is OR and returns true if either operand is true
  • ! which is NOT and inverses the result

These let you model any system. In fact, you really only need one, which is NAND (a NOTed AND), but that's outside of this post's scope. If you're curious about how these various logic gates work, try this demo:

Logical Operator Demo

Input A

Input B

AND Operation

Returns true only if both inputs are true

false

OR Operation

Returns true if at least one input is true

false

XOR Operation

Returns true if exactly one input is true

false

NAND Operation

Returns false only if both inputs are true

true

Bringing It Together with Ternary

It's taken us a while to get here, but now that we have a general idea of the operators available to us, I want to highlight the ternary operator and how it can be used with other operators that, while debatably syntactical sugar, can make your life much easier and code more readable.

The ternary or conditional operator can be thought of as an inline if-else. The syntax is simple:

foo ? true : false;

That's (Boolean Expression) ? True Result : False Result

They can be combined too, like this:

let foo = "", bar = "hi";
(foo || bar) ? foo ? foo : bar : bar;
// Results in 'hi'

You can use any of the logical or comparison operators within ternary to model complex logic as you would with more common logical control structures, only in a simpler syntax. I'm not advocating for huge chained ternaries, but when all you need is a simple if, especially when doing UI work, ternary is often the right choice.

Ternary Operator Use Cases

In true CRTV.dev fashion, here's an interactive demo to showcase more use cases of how ternary makes your life easier:

1. Simple Variable Assignment

Enter an age to check if someone is an adult:

2. Conditional Rendering

Toggle button to see different text:

3. Setting Default Values

Enter a name (or leave empty to see default):

4. Chained Ternary

Enter a score (0-100) to see grade: