35
Ternary Operator: Better Alternatives
The ternary operator is a nice way to write concise value assignments without having to write a more lengthy if/else
.
For example:
// This...
let value;
if (test) value = 1;
else valeu = 2;
// can be written as this:
const value = test ? 1 : 2;
However it's easy to misuse the ternary operator for things where simpler operators could often have been a better choice. So here are some alternatives for common mistakes.
const value = test ? true : false;
// can be replaced by boolean casting:
const value = !!test;
// or even
const value = Boolean(test); // I prefer the shorter alternative
const value = test ? test : null;
// can be written like this
const value = test || null;
Note: The code above will return null as long as
test
is falsy.
const value = test !== null || test !== undefined ? test : null;
// can be written like this:
const value = test ?? null;
By the way...
const test = a === null || a === undefined;
// can be simplified as:
const test = a == null;
I have seen this a few times. I promise.
const value = obj ? obj.a : undefined;
// which can simply be:
const value = obj && obj.a;
// or in more recent implementations:
const value = obj?.a;
This is my favorite one, and also an honest mistake. Some people get overexcited with the simplicity of the ternary operator and might think it is just a "shorter" if/else
statement.
let value;
test ? value = 8 : null;
// when they meant
if (test) value = 8;
The single-line if
statement is simple and clean enough for that purpose, and we know test ? value = 8
will not work. The ternary operator needs to have an else
return value. If you don't need it, use a single-line if
.
In a nutshell, if your ternary operator does not have a structure like the one below, you should raise an eyebrow and check if there really aren't other simpler alternatives.
const value = test ? otherValue : anotherValue;
Can you think of other examples you have seen of poor use of the ternary operator? Please let me know in the comments below.
35