The ternary operator

Writing modern JavaScript uses many features that makes our code terser and compact. At first glance, it can be hard to read but after a few times seeing these features in action it is very helpful, as a lot of cruft in the code is take away. This leaves more space for the important part of your code.

One of these things that take some practice getting used to reading is the ternary operator, which is a way to write terser if statements.

It’s easiest to grasp with an example. Consider the following function, that reveals one of my weaknesses:

const isScary_If = function (heightInMeters) => {
  if(heightInMeters > 8) {
    return `${heightInMeters}?! You betcha! I peed myself...`;
  }
  else {
    return `${heightInMeters}? I am not scared. You are scared!`;
  }
}

There’s is quite a lot of things in there that don’t have to do with the “problem” the code is solving. Now consider this code, that is doing the same thing but using the ternary operator:

const isScary_Tenary = function (heightInMeters) {
  return heightInMeters > 8 ?
    `${heightInMeters}?! You betcha! I peed myself...` :
    `${heightInMeters}? I am not scared. You are scared!`;
}

Did you see it? The ? and the : - told you it was terse. But wait, it can get even tighter by using Arrow functions and implicit return statements:

const isScary_Tenary = (heightInMeters) =>
  heightInMeters > 8 ?
    `${heightInMeters}?! You betcha! I peed myself...` :
    `${heightInMeters}? I am not scared. You are scared!`;

We went from 8 to 4 lines, but better yet from 3 to 1 statement.

But how does it work?

Ok, the ternary operator is to tight that it’s almost hard to see. Here’s the form

condition ? truthy-part : falsy-part

To quote MDN:

a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.

In our case:

• condition was heightInMeters > 8
• truthy-part was ${heightInMeters}?! You betcha! I peed myself...
• falsy-part was ${heightInMeters}? I am not scared. You are scared!

Let’s make one … slowly

The best way of grasping terse thing is to condense something verbose into the terse counter-part:

Here’s the first version:

if(heightInMeters > 8) {
    return `${heightInMeters}?! You betcha! I peed myself...`;
  }
  else {
    return `${heightInMeters}? I am not scared. You are scared!`;
  }

First, we can remove the curly braces and just keep the code on one line each:

if(heightInMeters > 8)
    return `${heightInMeters}?! You betcha! I peed myself...`;
  else
    return `${heightInMeters}? I am not scared. You are scared!`;

Then remove the return statements and leave empty string-lines:

if(heightInMeters > 8)
    `${heightInMeters}?! You betcha! I peed myself...`;
  else
    `${heightInMeters}? I am not scared. You are scared!`;

Then lets remove the else and replace it with a colon:

if(heightInMeters > 8)
    `${heightInMeters}?! You betcha! I peed myself...`;
  :
    `${heightInMeters}? I am not scared. You are scared!`;

Put in the ? after the condition:

if(heightInMeters > 8) ? 
    `${heightInMeters}?! You betcha! I peed myself...`;
  :
    `${heightInMeters}? I am not scared. You are scared!`;

Replace if with a return for the entire expression:

return (heightInMeters > 8) ? 
    `${heightInMeters}?! You betcha! I peed myself...`;
  :
    `${heightInMeters}? I am not scared. You are scared!`;

And finally make it tighter by remove the parathesis::

return heightInMeters > 8 ? 
    `${heightInMeters}?! You betcha! I peed myself...` :
    `${heightInMeters}? I am not scared. You are scared!`;

Done! Terse and nice!