【JavaScript】if文をスマートに記述する方法

こんにちは4号です。
最近カラオケにハマってるのですが、12月は普段より料金が高くなるので非常に金欠。（じゃあ行くな）

本題に入りましょう。

if(name === "") {
  console.log("名前を入力してください");
}

結論から言うと、このif文

if(!name) console.log("名前を入力してください");

こんなにスマートになっちゃうんです…！
今回はif文をスマートにする小ネタを３つ紹介します！

小ネタ① 条件式は簡略化できる

まず条件式についての知識を３つ紹介します。

知識①最終的には「trueかfalse」のどちらかに分類される
条件式とは、「正か誤」を判断するための式です。
すなわち、どんな条件式も最終的には「trueかfalse」のどちらかに分類されます。
当たり前ですね。

知識② 条件式は比較演算子（<=や===など）を使わなくてもよい
条件式と聞くと「num <= 3」や「val === “Google”」みたいなのを想像すると思いますが、
比較演算子を使わずとも値だけで「trueかfalse」に分類できるんです。
条件式に値だけ記述したときの判断基準は以下の通り。

false・・・””(空文字), 0, null, undefined, NaN
true・・・false以外の値すべて

つまり、

const favoriteFruit = "りんご";
if(favoriteFruit) {
  console.log("好きな果物は" + favoriteFruit + "です。");
}

これはtrueになり、ログが出力されます。

知識③ 「!」（論理否定演算子）を使うと値が反転する
条件式は値の前に「!」をつけると判定が反転します。
↓サンプルコード

const val = "";
if(!val) {      // valは空文字なのでfalseだが!がついているのでtrueになる
  console.log("trueです");
}

const num = 3;
if(!num <= 0) {      // numは0以下ではないが!がついているのでtrueになる
  console.log("trueです");
}

これらを踏まえると

if(name === "") {
  console.log("名前を入力してください");
}

これが

if(!name) {
  console.log("名前を入力してください");
}

こうなるのはわかりますね。
ただし、!name には0やnullなども含まれますので、そこを区別したい場合は比較演算子を使うと良いでしょう。

小ネタ② if文は一行で記述できる

{ }内の処理が一行である場合に限りますが、if文は一行で記述することができます。

if(!name) {
  console.log("名前を入力してください");
} 

これが

if(!name) { console.log("名前を入力してください"); }

こう。

小ネタ③ { }はつけなくてもいい

if(!name) { console.log("名前を入力してください"); }

これが

if(!name) console.log("名前を入力してください");

こう。
最初に比べるとかなりスマートになりましたね。

また、{ }内の処理が複数行であっても{ }を外すことはできますが、バグになるケースもあるので気をつけましょう。
こちらの記事がわかりやすかったので貼っておきます。
JavaScript: if 文で波括弧を省略する場合の注意点

まとめ

いかがでしたか？
①条件式の簡略化
②一行での記述
③{ }の除去
でif文をスマートにすることができましたね。
コードをスマートに記述すると他の情報がスッと入ってくるのでぜひ実践していきましょ〜

弊社ではグループウェアにGoogleWorkSpaceおすすめしております。システムの移行や初期設定から、導入後のテクニカルサポート、オンライントレーニングコース、管理コンソールの運用代行まで、様々なサポートを提供しております。ご興味のある方は下記のフォームからお気軽にお問い合わせ下さい。