!valueで意図しないreturn - falsyな値と0

関数に入らない

関数に入らずハマった昔話

フォームから入力された値を加工してAPIに渡すための関数を作り、
valueの値がなければ関数から抜けるようにしていました。

const onFinish = (value) => {
if(!value) return
...

ところがフォームの値に数字の0が入っていると、意図せず関数から抜けてしまいます。

原因

JavaScriptではfalsyな値という括りがあるそうです。
0はfalsyな値とみなされ、!valueの条件に合致してしまっていました。

公式でfalsyな値は以下のように定義されています。

• false
• 0
• -0
• 0n
• ""
• null
• undefined
• NaN

参考：
https://developer.mozilla.org/ja/docs/Glossary/Truthy

解決

なので、「値がなければ関数を抜ける」コードは、正しくは

const onFinish = (value) => {
if(value === undefined) return
...

でした。