== null よりも ===null と === undefined を使おう #JavaScript

Re: === undefined よりも == null を使おう - Qiita

こちらの記事の反対のスタイルでコード書いています。コメント欄に書くとだらだらと長くなるので記事にします。

等価演算子「==」をnullのときだけ使うという謎の風習が以前からあって、そうすると業界に曖昧コードが増えてしまうのは残念なので書きます。

nullとundefined - TypeScript Deep Dive 日本語版

== nullを使ってundefinedと nullを両方ともチェックすることを推奨します。一般的に2つを区別する必要はありません。

どこの一般なんだろうか。プログラマ以外の開発者ではない一般ピープルのことか？

曖昧判定「==」

JavaScript で多くのミス、不具合、バグ、が曖昧判定からきています。
「==」と「===」の違いです。
「==」は等価演算子。曖昧判定で、JavaScriptでは全ての場面で不要です。
「===」は厳密等価演算子。厳密判定で、JavaScriptではこちらを使いましょう。

ある値が、1 (数値)もしくは '1' (文字列) のどちらかが入っているかわからないけど、なんとなく動くコードというのは次のように書くことができます。

if (value == 1) {
  // value が数値でも文字列でも動く
}

これは、あまり推奨されません。valueが数値か文字列かどちらかわからないという状態では開発するのが難しいです。

if (value === 1) {
}
// もしくは
if (value === '1') {
}
// ちゃんと区別して書こう

null と undefined も同じ理由で区別する方が望ましいです。

null と undefined を一緒くたに扱うと発生するバグ

関数引数のデフォルト値指定や、分割代入のデフォルト値指定では、nullは無視され、undefinedだけがデフォルト値指定されるので、nullとundefinedは明確に区別しておいたほうがいいです。

簡単に例を書きます。

const result = funcA();
if (result == null) {
  funcB(result);
}

function funcB(value = '無効です') {
  console.log(value)
}

この場合、funcAで値やオブジェクトなどが返る場合はfuncBは実行されず、undefinedが戻るとき「無効です」と表示され、null の場合は「null」と表示されます。

何も実行されないのか、「無効です」か、の2種類ではなく「null」が表示される場合があります。よく知ってないと不具合につながるようなあぶない挙動です。

なので、funcAの戻り値に、nullを返すのかundefindeを返すのかは、重要な問題になります。

一文字一句間違えてはいけない正確にコードかかなければいけないのがプログラマの仕事です。null と undefined という別の値を似たようなものとして混ぜてしまうと、プログラムが正確に動きません。

「==null」で分岐しているコードを読んでも、判定後の値がnullなのかundefinedなのかを読み取ることはできません。わざわざ動かさないと本当の値がわかりません。リファクタリングするときに、result がnullかundefinedか不明なので、関数のデフォルト値判定で使えないことになるので、リファクタリングしにくいコードになります。

null と undefined は同じものではないのです。同じものではないのに、「==null」として同じものとして判定する必要ないです。

対策

大抵の場面は

if (result === null) {
  funcB();
}

if (result === undefined) {
  funcB();
}

どちらかで済みます。正しくどちらかを書きましょう。

厳密に「==null」と同じことをしたいのなら

if (result === null || result === undefined) {
  funcB();
}

このように書いておくとよいです。
この書き方は「==null」と比べて冗長(無駄に長い)に思うかもしれませんがそうではなく、書いた人の意図が正しく伝わるようになっているので「==null」よりも読みやすいので、よい書き方です。文字数が少ないのがよいコードなのではありません(書くときにさぼってるだけ)。文字数が多かろうが少なかろうが読みやすいコードがよいコードです。

この書き方なら result が null か undefinedか、どちらかになる場合を想定して判定しているのだな、と確実にわかるような書き方です。

「==null」というコードを見ると下記のような迷いが起こります。

間違って「==」を使っているのか、
あるいは、nullを見るためだけに使っているのか、
あるいは、undefinedをみるためだけに使っているのか、
あるいは、null も undefined も両方とも判定しているのか、

これらのどれを意図しているのかわからないコードになります。あいまいです。

「if (result === null || result === undefined) {」の場合は、4. に確定します。

参考

プログラミングでは、より短いコードで同じ目的を達成した方が、優れているのですか？ - Quora

大事なこと

繰り返します。厳密等価演算子使え、というのはあらゆるところで言われていることです。

JavaScript で多くのミスが曖昧判定からきています。
「==」と「===」の違いです。
「==」は等価演算子。曖昧判定で、JavaScriptでは全ての場面で不要です。
「===」は厳密等価演算子。厳密判定で、JavaScriptではこちらを使いましょう。

単にこれを守っていればいいだけです。nullのときの例外なんて考える必要ありません。

バグだらけのプロジェクトだとコードに曖昧さがあると即死につながるので、這いつくばってでも前に進んで生き残るためには、こうした方がいいよ的な、現場からは以上です。