46
loading...
Ternary Operator: Better Alternatives
The ternary operator is a nice way to write concise value assignments without having to write a more lengthy
For example:
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 alternativeconst 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.
46