実践的な応用例

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

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

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

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

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