A === !null と A !== null は全然違う

はじめに

Typescript のバージョンアップをしたら、A === !null にエラーが出ていました。
軽い気持ちで、フンフンとなおしてリリースしました。
その後に、バグ報告が！
自分じゃないところかなと思っていたら、まさかの私の箇所。
反省の意味も込めて、記事書きます。

結論

A === !null と A !== null は全然違う
メロンとメロンパンぐらい違う。
蟹とかにパンぐらい違う。
理髪店と理容室くらい違う。
とにかく違う。

A === !null とは

!null は JavaScript の論理否定演算子（!）を使った表現で、null を否定した結果が true になります。

null は falsy な値であり、!null は true になります。
つまり、A === !null は A === true と同じ意味になります。
これは、「A が true と等しいか」をチェックしています。

A !== null とは

A !== null は「A が null ではない」ことを確認するための条件です。つまり、この式は A が null 以外のどんな値でも true になります。

違い

A === !null は、「A が true と等しいかどうか」を確認しています。
A !== null は、「A が null ではないかどうか」を確認しています。

実際のコード

let A = true;

console.log(A === !null);  // true  -> Aは true なので、A === true と等しい
console.log(A !== null);   // true  -> A が null ではないため true

A = null;

console.log(A === !null);  // false -> A は null なので、A === true は false
console.log(A !== null);   // false -> A は null なので false

そもそも判定するものが違いますね・・・

まとめ

まず、少しコードを変えただけと思っても、テストは必ず必要です。
今回の件もリリース前にしっかり動作確認すれば潰せたかもしれない。
テスト大事 ★