More than 3 years have passed since last update.

JavaScript(TypeScript)の論理判定のベストプラクティスを考える

Last updated at 2020-07-07Posted at 2020-07-07

結論からいうと

Truthy/Falsyは絶対利用しない（必ずif (変数 === undefined)のように書く）
if (変数 === undefined || 変数 === null)といちいち書くのはやばいので、nullは利用しない
外部APIとの接続でnullが必要な場合は、必ずラッパーに閉じ込める。ラッパーの外にnullを持ち出さない。
Lintで設定しよう

Truthy/Falsyを使いたくない

こうやって書きたい時、よくありますね。


const user = getUser();
if (user){
    // userが存在する場合の処理
}

ぼくも上のように書いてたんですが、JavaScript/TypeScriptのTruthy/Falsyの仕様上バグりやすすぎるのでやめることにしました。

JavaScript(TypeScriptも)のTruth/Falsyが罠

上のケース、userがobjectなら（普通ならそうのはず）問題ないけど、stringかnumberだったらまずい。

TypeScriptでuser: Userと書いたところでそれは保証できない。type User = stringかもしれないし。

それに、「stringかnumber以外ならTruthy/Falsyを利用してもよい」という運用は複雑でよくなさそう。

Truth/Falsyは、常に利用しない

if (user) -> if (user !== undefined)
if (!user) -> if (user === undefined)

と書き換えるのが結局ベストプラクティスとおもう。

nullだったらどうする？

nullとundefinedが混在してるコードでは、こう書かなきゃいけない。

if (user) -> if (user !== undefined && user !== null)
if (!user) -> if (user === undefined || user === null)

これは

見た目きたねえ
書くのだるい
いつかミスる

ので絶対やめたほうがよさそう。

if (user) -> if (user != undefined)
if (!user) -> if (user == undefined)

とすればnullもみてくれるが、==は一律で禁止したいので却下。（仮にここだけ==を利用する運用にした場合、ミスって===と書くかもだし、そもそも誰かが（未来の自分含め）「あ、ここ==使ってんじゃん。だめだめ、===に修正、っと」としうる。ミスに見えうる書き方はだめってダグラス・クロックフォードもいってた。）