if文の条件式の中身は厳密に判定できる形にしよう

タイトルの通り、if文の条件式の中は厳密に判定できる形にすることで予期せぬバグを防ぐことができる、という話です。

例えば、ユーザーの名前をラベルとして表示する関数があるとして、名前が空文字の場合は「名無しさん」と表示したいとします。

function getLabel(name: string): string {
if (!name) {
return "名無しさん";
}
return `${name}さん`;
}

このように書いた場合、引数 name が false の場合、「名無しさん」と表示されることになり、例えば空文字以外にも falsy な値 (null や undefined) が渡ってきたときは「名無しさん」と表示されてしまいます。

そこで、より条件を厳密にすることで想定外の挙動を防ぐことができます。

function getLabel(name: string): string {
if (name === "") {
return "名無しさん";
}
return `${name}さん`;
}

もう一つ、React で消費税の情報が渡ってきた場合に、コンポーネントを表示するという例で考えてみます

if (taxPrice) { return <SomeComponet /> }

このように書いた場合、例えば消費税が 0 の場合、 0と表示されてほしいのですが、実際には 0 は falsy のため、コンポーネントはレンダリングされません。

if (taxPrice !== undefined) { return <SomeComponet /> }

このように書くことで 0が渡ってきた時に、 0が表示されます。