addEventListenerでnullチェックが面倒くさいとき

例えば、ある要素をクリックした時の動作を定義する際、大雑把にこんな感じになる。

const el = document.getElementById('checkbox');
el.addEventListener('click', e => {
  // 省略
  e.preventDefault();
});

だが[id=checkbox]が存在しない場合、getElementByIdはnullを返す。
なのでDOM要素が存在しているかを判別する必要が出てくる。

const el = document.getElementById('checkbox');
if(el != null) {
  el.addEventListener('click', e => {
    // 省略
    e.preventDefault();
  });
}

これはダサい。
ので、該当のDOM要素が存在しなかったらDOMを変数に入れてしまえばいい。

const el = document.getElementById('checkbox') || document.createElement('input');
el.addEventListener('click', e => {
  // 省略
  e.preventDefault();
});

createElementしたDOMはHTML上には存在しないので、遠慮なしにaddEventListerでリスナー待ちになる。
ただし問題はあまりにやりすぎるとメモリを喰らっていくので、本来はちゃんとnullチェックした方がいい。