【ESLint】ESLint下で「===」を使った真偽判定を正しく返す方法

ESLintの規約の中で「===」を使えという警告があります。

「===」は「==」よりも厳しい判定方法で、これをifなどに使うとバグ防止のためにより

正確な値を求められ、満たなかった場合はfalseになってしまいます。

ESLintを導入しているプロジェクトで「==」を使うと以下の警告がでてきます。

Expected '===' and instead saw '=='

警告なので無視！という訳にもいきません。今は大丈夫な警告文も

ゆくゆくはバグの温床となりうるので駆逐しておきたいところ。

例えば、localStorageで数値を保存すると文字列に変換されます。

この状態で0と比較する例を書いてみました。

//型までは見てくれないのでtrueになる(けっこう曖昧)

①window.localStorage.Count == 0 //true

//厳密にいうと見た目は同じだが文字列と数値を比較しているのでfalse

②window.localStorage.Count === 0 //false

//localStorageの中身をNumberで数値に変換しているのでtrueが返ってくる

③Number(window.localStorage.Count) === 0

まず①番は、「==」と0で照合しています。「==」で判定する場合は文字列も数値も

関係なく、true判定されます。

②番は、先ほど挙がった「===」とlocalStorageの中身を照合しています。

「===」は型まで調べるので、localStorageは文字列。0は数値なので判定はfalse。

③番も「===」を使って判定していますが、今度はlocalStorageをNumber変換して

比較しています。Number関数によって変換されたlocalStorageの中身は数値として

扱われるので0と比較することができるようになり、結果としてtrueを受け取ることが

できます。