関数に入らない

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

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

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

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

原因

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

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

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

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

でした。