JavaScriptのif文、三項演算子とは何か

JavaScriptのif文の一種である三項演算子についてご説明します。

三項演算子とは、if文を１行で書く方法です。

詳しい説明

三項演算子の書き方はこのように書きます。

条件式 ? trueの式 : falseの式

条件の結果でtrue値かfalse値を返します。if文と違って値を返すため、式を設定することはできません。

覚えるときのキーワードは?と：です。なお、trueもfalseも必ず値を設定しないといけません。

三項演算子のメリットは、1行で完結するのでコードが読みやすくなることで

す。例えばif文で判定によって値の代入を変えるとします。

let flag;

//if文の場合
if(true){
  flag = '1';
} else {
  flag = '0';
}

このif文の場合5行使ってしまいます。これを三項演算子で書きます。

let flag;

//三項演算子
flag = true? '1': '0';

このように書けます。見やすくなったのがわかりますよね。また自分が打つコードの数を減らすことができます。三項演算子は基本的に変数を入れるときに役立ちます。

デメリットと挙げるとしたら値しか返せないので、使える場面が限られていることですかね。そう聞くと使えないと思ってしますかもしれないですが、三項演算子を覚えておくことで上の例のような場面で少ない文字数で済みます。

よく使われるのはnullチェックなどのチェック判定に使用します。

例えば、メソッドの呼び出しでnullで引数を設定するとエラーが出てしまう場合があるとします。その時に値がnullでなければそのままにし、値がnullの場合に空文字を代入します。

str = str != null ? str : '';

このように書くとstrがnullでないならそのままの値を保持し、nullの場合は空文字を代入します。

またforと合わせることでオブジェクト内のプロパティを簡単にチェックできます。

for(var key in obj){
  obj[key] = obj[key] != null ? obj[key]: '';
}

三項演算子はあまり使わず、初めに勉強したときにif文に気を取られ忘れがちですが、覚えておくとかなりコード量を減らせるのでお勧めです。

使い方は、条件式 ? trueの式 : falseの式だということだけ覚えておいてください。