JavaScriptにおいてイベントハンドラに何もしないダミー関数を入れる意味と効果

Reactハンズオンラーニングを読んでいてなるほどなーと思ったのでメモ

コード例

Reactでクリックイベントを付与したオブジェクトを作る関数を作るとする

function makeClickableButton(onClickEventFunction = f => f){
  return ( <button onClick={onClickEventFunction} >this is demo button</button>)
}

f => f という形で一見すると意味のない初期値をいれるような記述が今回取り上げたい話題

どういう嬉しい効果があるのか

このような書き方にすると「引数に何もセットしなくてもエラーにならない」というのが嬉しいポイント。

仮に onClick などに undefined がセットされてしまうと、クリックするとJavaScriptのバージョンによってはでエラーが上がってしまう懸念がある。そのため、必ず何かしら関数が入るようにしておきたい。特にクリック時のイベントに関して何もセットしたくないがコンポーネント自体は出したいときなどに makeClickableButton() と呼んでも問題ない形になる。

また、 undefined の変数が来ても、中身としてエラーにはならないので、防護壁の一枚としても機能する。