Javascriptの条件分岐でif(obj)のような書き方をします。 objの型は様々だと思いますが、実際に真偽値として扱った際にどういった基準でtrue,falseと判定されるのかご紹介します。
いきなり結論になりますが、真偽値として扱った際にfalse
とされるのは6パターンしかありません。
以下、順を追って説明します。
まず一番オーソドックスなのが、boolean
としてのfalse
です。
当然false
はfalse
として扱われます。
let t = true;
let f = false;
if(t) {
// ここには入るが
}
if(f) {
// ここには入らない
}
これはご存知の方が多いかと思います。
undefined
型もfalse
として扱われます。
よくあるのがオブジェクトのプロパティをif
でチェックしてからロジックを書くという手法です。
これは、オプショナルチェイニング演算子を使っても書くことができます。
let obj = {
a : "hoge"
}
let b = "";
if(obj.b) {
// obj.bはundefinedなのでここには入らない
b = obj.b;
}
// オプショナルチェイニング演算子を使っても書ける
b = obj?.b || "";
上記とほぼ同じ使用感ですがnull
型もfalse
です。
undefined
との明確な違いは、null
は開発者が意図的にnull
にすることが多いですが、undefined
は上記例にもあるように外部から取得したデータ等、値が正確に取得できているかわからない場合に用いられます。
let obj = {
a : "hoge",
b : null
}
if(obj.b) {
// obj.bはnullなのでここには入らない
// 以下略
}
旧式のシステムだとnumber
型でフラグを持っていたりしますが、そういった場合にif
が意図しない挙動を起こしたらだいたいこれが原因です。
Javascript
ではnumber
の0
がfalse
となるため、意図せず値を0
にしたものを条件分岐で使用してしまうケースに注意が必要です。
if(0){
// 入らない
}
NaN
もfalse
になります。
これが原因で条件分岐が不具合を起こすというよりは、その前段階の処理が誤っていて出力がNaN
になってしまった、というケースが多いです。
ちなみにInfinity
はfalse
にはなりません。
if(NaN) {
// 入らない
}
if(Infinity) {
// 入る
}
string
型の空文字""
もfalse
になります。
Web
系のシステムで、ラベルとして表示する文字列が存在する場合のみ要素として追加する、といった場合に用いられることが多いです。
const str = "";
if(str) {
// 入らない
}
今回はfalse
として扱われるケースの全6種を紹介しました。
特にnumber
の0
やstring
の""
は覚えておかないと思ってもみない動作を引き起こす可能性があります。
条件分岐が絡むロジックというのはシステムの規模に関わらず遭遇するため、覚えておくといいでしょう。