【Javascript】知ってるようで知らないfalse

Javascriptの条件分岐でif(obj)のような書き方をします。 objの型は様々だと思いますが、実際に真偽値として扱った際にどういった基準でtrue,falseと判定されるのかご紹介します。

前提条件

  • とくになし

falseと判定されるのは6パターン

いきなり結論になりますが、真偽値として扱った際にfalseとされるのは6パターンしかありません。 以下、順を追って説明します。

1.boolean型のfalse

まず一番オーソドックスなのが、booleanとしてのfalseです。 当然falsefalseとして扱われます。

let t = true;
let f = false;

if(t) {
  // ここには入るが
}

if(f) {
  // ここには入らない
}

2.undefined型

これはご存知の方が多いかと思います。 undefined型もfalseとして扱われます。 よくあるのがオブジェクトのプロパティをifでチェックしてからロジックを書くという手法です。 これは、オプショナルチェイニング演算子を使っても書くことができます。

let obj = {
  a : "hoge"
}

let b = "";
if(obj.b) {
  // obj.bはundefinedなのでここには入らない
  b = obj.b;
}

// オプショナルチェイニング演算子を使っても書ける
b = obj?.b || "";

3.null型

上記とほぼ同じ使用感ですがnull型もfalseです。 undefinedとの明確な違いは、nullは開発者が意図的にnullにすることが多いですが、undefinedは上記例にもあるように外部から取得したデータ等、値が正確に取得できているかわからない場合に用いられます。

let obj = {
  a : "hoge",
  b : null
}

if(obj.b) {
  // obj.bはnullなのでここには入らない
  // 以下略
}

4.number型の0

旧式のシステムだとnumber型でフラグを持っていたりしますが、そういった場合にifが意図しない挙動を起こしたらだいたいこれが原因です。 Javascriptではnumber0falseとなるため、意図せず値を0にしたものを条件分岐で使用してしまうケースに注意が必要です。

if(0){ 
  // 入らない
}

5.NaN

NaNfalseになります。 これが原因で条件分岐が不具合を起こすというよりは、その前段階の処理が誤っていて出力がNaNになってしまった、というケースが多いです。 ちなみにInfinityfalseにはなりません。

if(NaN) {
  // 入らない
}

if(Infinity) {
  // 入る
}

6.string型の空文字

string型の空文字""falseになります。 Web系のシステムで、ラベルとして表示する文字列が存在する場合のみ要素として追加する、といった場合に用いられることが多いです。

const str = "";
if(str) {
  // 入らない
}

まとめ

今回はfalseとして扱われるケースの全6種を紹介しました。 特にnumber0string""は覚えておかないと思ってもみない動作を引き起こす可能性があります。 条件分岐が絡むロジックというのはシステムの規模に関わらず遭遇するため、覚えておくといいでしょう。

SNSでシェアする