【JavaScript】0 は falsy であることを忘れてハマった話

JavaScript

2024.01.28

この記事は約3分で読めます。

記事内に広告が含まれています。

JavaScript でのコーディングは、 null や undefined のチェックとの戦いでもあります。

『バックエンドの処理が中心で、フロントエンドは HTML もしくはテンプレートエンジンが中心だから、JavaScript なんて ES6 でさらっとかければOK』という場面もあるのではないでしょうか。

そんな時に、null や undefined のチェックで落とし穴にハマらないように注意しましょう。

よく（？）ある書き方

null や undefined のチェックは、以下のような書き方が一般的ですが、冗長さが否めません。

const sampleElement = document.getElementById('id-sample');
if (sampleElement !== null && sampleElement !== undefined) {
  // 何らかの処理
}

DOM　は、画面に描画されていない場合は、 document.getElementById などでは undefined になるので仕方ないですね。

そして、こう書くと思います。

const sampleElement = document.getElementById('id-sample');
if (sampleElement) {
  // 何らかの処理
}

null, undefined は falsy なので、このように直接条件句として判定させるのがシンプルで、冗長さが軽減されます。

この書き方、先ほどのような DOM の存在有無の場合には問題ないのですが、ロジック内での null や undefined チェックに転用するのは注意が必要です。

私の場合は、とある処理で値が入っているのにどうしても分岐の中に入っていかず、いったいなぜだ・・・と頭をひねることになりました。

if (calcResult) {
  // 何らかの処理
}

計算結果が null か数値を返却するロジックなのに、なぜ null じゃないのに分岐に入らないのだ・・・？

という処理の箇所で沼にハマっていたのですが、何のことはないです。

calcResult が 0 の場合は false 扱いです。

そりゃそうだろって感じなのですが、デバッグ中はそんなことすっかり頭から抜け落ちちゃうんですよね。これが。

ちなみに、空文字列（'' や ""）も falsy なので注意です。

このシンプルな書き方は、使い所を考えましょうね。

「プログラムは自分の書いた通りにしか動かない」

これを呪文のように唱えながらデバッグすべし。