The ternary operator is a nice way to write concise value assignments without having to write a more lengthy
// 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
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"
let value; test ? value = 8 : null; // when they meant if (test) value = 8;
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
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.