[JavaScript]少ないコードのif文は三項演算子ですっきり書く

2021-02-21

JavaScriptでifを書く時に、すごく少ない記述量のif文がある場合があります。

それ、三項演算子を使うとすっきり書けますよ？というお話しです。

三項演算子とは？

条件 (三項) 演算子は JavaScript では唯一の、3 つのオペランドをとる演算子です。この演算子は、if 文のショートカットとしてよく用いられます。

分かったような分からないような。

もう少し噛み砕くと、「シンプルなif文は三項演算子を使うとすっきり書けるよ」というお話しです。

例えば、以下のようなシンプルなif文があるとします。

var a = 2;

if (a === 0) {
    a = 1
} else {
    a = 0
}

console.log(a)

=> 0

変数aが0であれば1を代入し、それ以外の数であれば0を代入するというものです。

if文で書くと上記のようなコードになりますが、こんなシンプルな条件式なのにif文を使うのもな〜という時に登場するのが三項演算子です。

条件 ? Trueの処理 : Falseの処理

と言った具合で1行で記述することができます。

var a = 2;

a === 0 ? a = 1 : a = 0

console.log(a)

=> 0

複数行のif文が1行になりスッキリ見やすくなりました。

個人のコードの書き方によると思いますが、変数に値を代入する簡単な処理の場合などに三項演算子を使っています。

しかし、処理が複雑になるようなものでは三項演算子ではなくif文で書くほうが可読性が上がります。