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

JavaScript

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

結論から言うと

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

スポンサーリンク

詳しい説明

書き方

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

条件式 ? 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の式だということだけ覚えておいてください。

スポンサーリンク
JavaScriptプログラミング
スポンサーリンク
この記事を書いた人
まさき

25歳の社会人4年目のシステムエンジニアです。
未経験からIT企業に入社して業務や、業務外でも学習することでプログラミングが書けるようになりました。
得意なのはHTML,CSS,JavaScript。最近はVue.jsとGASを勉強中です。
本を読むことが好きなのでIT技術書以外にもたくさん読みます。
好奇心旺盛でとりあえずやってみる精神です。
楽しいことが生きがいで、仕事も私生活も楽しくなるように日々奮闘中。

まさきをフォローする
シェアする
まさきのエンジニア図書館
タイトルとURLをコピーしました