記事にしようと思ったけど、するまでもないし、何が伝えたいか分からなくなったのでスクラップに島流し

結論

関数に括弧()をつけることで関数が実行されます。
以上です。

問題

JavaScriptをゴニョゴニョいじっていた時の出来事。
ボタンにクリックイベントをつけて処理を実行しようとした場面で問題が発生。
addEventListener()メソッドの第二引数の関数に括弧をつけてみたら、クリックをしたタイミングではなく、読み込まれた段階で実行されました。

どういうことかコードを見てみましょう。

以下のようなbutton要素があるとます。

<button class="button">ボタン</button>

で、このボタンにaddEventListener()メソッドでclickイベントを実装します。
ここで、第二引数には関数を指定して、その関数の直後に()をつけてみたわけです。

// `button`要素を取得
const button = document.querySelector('.button');
// `clickFunc`関数を定義
const clickFunc = (str) => console.log('クリックされました！');
// クリックイベントを追加（`clickFunc`関数に()をつける）
button.addEventListener('click', clickFunc());

こうすると、クリックされた時に関数が実行されず、読み込まれた段階で実行されます。

なぜなのか？

()は何者なのか？
まず大前提として関数はオブジェクトであるという点です。関数への参照は他の変数と同様に代入することで渡すことが可能です。そして、()をつけると実行されます。

まずもっと簡単な例をとりましょう。
例えば、以下のように単にconsole.log()を実行する関数を用意します。

// `clickFunc`関数を定義
function omg() {
  console.log('Oh my god!');
}

// 単に`omg`関数が代入されるだけ
const something = omg;
`omg`関数が実行されて代入される
const something = omg();

()をつけると、omg関数が実行されて、その返り値のundedinedが代入されます。（何もreturnしていない為）

これは即時実行関数をイメージすればすぐわかります。

参考

https://qiita.com/obake_fe/items/8fb3f52674bea5a5173e