JavaScript Ternary Operator

Lorenzo Zarantonello - Jan 26 '22 - - Dev Community

JavaScript list of operators containing question marks might surprise new developers approaching the language for the first time. 
We already discussed how the nullish coalescing operator (??) works. 
In this post, we will talk about the conditional operator, also known as the ternary operator.

JavaScript Ternary Operator

Following MDN definition, "The conditional (ternary) operator is the only JavaScript operator that takes three operands: 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".

condition ? expression1 : expression2
Enter fullscreen mode Exit fullscreen mode

You can read this operator as follow: IF the condition is true execute expression1 else execute expression2.

This is not entirely accurate but before diving into truthy and falsy let's see an example with a condition that can only be true or false.

let condition = true;
console.log(condition ? 'exp 1' : 'exp 2'); // exp 1
Enter fullscreen mode Exit fullscreen mode

Since we defined a variable called condition as true, the ternary operator executes the first expression which is a simple string "exp 1". 

The console.log() around the ternary operator logs the result of the ternary operator and it logs "exp 1".
This is the core concept of the ternary operator.

Ternary operator with truthy and falsy

As I said above, you can read this operator as follow: IF the condition is true execute expression1 else execute expression2. But this is not entirely accurate!

So, what is the problem?

When talking about Javascript Ternary Operator, MDN talks about truthy and falsy instead of true and false.

condition ? expression1 : expression2
Enter fullscreen mode Exit fullscreen mode

IF the condition is truthy execute expression1 else (falsy) execute expression2.

In simple terms, 

  • Truthy values are equal or can be converted to true. Which values are truthy? All values unless they are defined as falsy. Thanks…
  • Falsy values are equal or can be converted to false. (i.e. false, 0, -0, 0n, "", null, undefined, and NaN).

Image description

See some more examples using the ternary operator with strings and numbers.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player