【JavaScript】Number(null)は0が返る

プロジェクトの一部画面をRails + Reactで作っている場合の注意点をメモしておく。ちょっとハマった。

RailsのViewからデータ属性を使って以下のように値をフロントエンドへ渡している箇所があった場合。

  #hoge-form{data: { hogeId: @hoge&.id }}
    = javascript_include_tag('HogeWritingForm')

@hoge&.idはある条件下でnilになる。

フロントエンド側で以下のように値を取得すると、hogeIdには0が代入されることになる。

const container = document.getElementById('hoge-form')
const hogeId = Number(container?.getAttribute('data-hogeId'))

なぜnilを渡したのに0になるのか？これはJavaScriptの型変換の仕様で、Number(null)は0を返すため。
（そもそもnilを渡さないほうがいいのはそうなのだが、まぁいろんな事情があるときはあるものだ）

以下のようにnullが返るよう対応した。

const hogeId = Number(container?.getAttribute('data-hogeId')) || null

0はJavaScriptではfalsyな値となるため、0 || nullの結果はnullが返る。