ちゃんと学ぶ、JavaScript無名関数で関数を楽に利用しよう

前の記事で、イベントを定義するとき、「doDice」という関数は定義しました。

しかし、この関数は1度しか利用されません。このような、1度しか使わないような関数はわざわざ関数名をつけて定義するのは効率が悪く感じます。

そこで、次のようにイベント定義の部分に直接記述してしまうことができます。

<div>
  <p>サイコロ： <span id="output">?</span></p>
</div>
<div>
  <button id="do_dice">サイコロを振る</button>
</div>
<script>
document.getElementById('calc').addEventListener('click', () => {
  const dice = Math.floor(Math.random() * 6) + 1;
  document.getElementById('output').textContent = dice;
});
</script>

このように、関数名をつけずにパラメータなどに直接関数の定義を記述する方法を「無名関数」と呼びます。こうすることで、効率よく関数を利用することができます。

なお、関数の定義には、次の3種類があると紹介しました。

• 関数宣言
• 関数式（関数リテラル）
• アロー関数

このうち、無名関数として利用できるのは関数式とアロー関数のみで、関数宣言は利用できないので気をつけましょう。関数式で記述する場合は次のようになります。

<script>
document.getElementById('calc').addEventListener('click', function() {
  const dice = Math.floor(Math.random() * 6) + 1;
  document.getElementById('output').textContent = dice;
});
</script>

どちらを使うかは、好みで良いでしょう。