実践的な応用例

以下の2つの数字が入ったdiv要素があるとします：

html<div id="div1">10</div>
<div id="div2">10</div>

最初のdivをクリックするとその値が2乗され、 2番目のdivをクリックすると3乗されるように しましょう。

コードを2つのモジュールとして構成します：

javascript;(function() {
  let elem = document.querySelector('#div1'); // 最初のdiv

  function func(num) {
    return num * num; // 2乗する
  }

  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // 2番目のdiv

  function func(num) {
    return num * num * num; // 3乗する
  }

  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

これで、各モジュール内では、変数や関数がスクリプト全体の 他の変数や関数と競合することを恐れずに使用できます。

例えば、両方の要素を変数elemに格納していますが、 それぞれが自身のモジュール内の変数です。 もしここにモジュールがなければ、各要素を格納するために 異なる変数を導入する必要があったでしょう。 モジュールがあれば、誰かが同じ変数名を使いたいと 考えていることを心配せずに、この変数を自由に使用できます。