三項演算子とは何ですか?

三項演算子は、if…else ステートメントを使用する代わりに、コード内の条件をチェックするために使用されます。これは条件演算子とも呼ばれ、コードを (ほとんどの場合) かなり短くして読みやすくします。

構文

三項演算子の構文を見てみましょう。

condition ? trueExpression : falseExpression

condition — 評価している条件。例: 年齢は 5 歳以上です。

trueExpressioncondition:の場合、これが起こるはずですtrue.

falseExpressioncondition:の場合、これが起こるはずですfalse.

例

以下は、交通信号の色に基づいて車が移動する必要があるかどうかをチェックする if...else ステートメントを使用した例です。

let color = ‘red’; // color of the traffic light
let carMovement;

if (color === 'red') {
  carMovement = 'stop';
} else {
  carMovement = 'go';
}

console.log(carMovement); //stop

let color = 'red'; // color of the traffic light
let carMovement = color === red ? 'stop' : 'go';

console.log(carMovement); //stop

1 つの三項演算子を式として別の三項演算子の中にネストまたはチェーンすることもできます。以下は、数値が正、負、またはゼロであるかどうかを確認する例です。

let num = 2;
let result = num >= 0 ? num === 0 ? 'zero' : 'positive' : 'negative';

console.log(result); //positive

let num = 2;
let result = (num >= 0) ? (num === 0 ? "zero" : "positive") : "negative";

console.log(result); //positive

三項演算子をどのような場合に使用する必要がありますか?

上で強調した例のように、三項演算子を使用するとコードが短くなりますが、複雑なネストされた三項演算子を使用すると、コードが読みにくくなり、わかりにくくなる傾向があります。

経験則としては、今後 2 年間に他の誰かがあなたのコードを簡単に読んで理解できるかどうかを考えることです。答えが「いいえ」の場合は、代わりに if…else ステートメントを使用します。

ヒント: ESlint を使用する場合、ネストされた三項演算子の使用は完全に禁止されます。

結論

三項演算子が輝くのは、コードが読みやすく、理解しやすく、保守しやすくなる場合のみです。コードを短くするだけではないので、効果的に使用してください。