Praktyczne zastosowanie

Załóżmy, że mamy dwa dive z liczbami:

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

Zróbmy tak, aby po kliknięciu na pierwszy div jego wartość była podnoszona do kwadratu, a po kliknięciu na drugi div - do sześcianu.

Zorganizujmy nasz kod w postaci dwóch modułów:

;(function() {
	let elem = document.querySelector('#div1'); // pierwszy div
	
	function func(num) {
		return num * num; // podnosimy do kwadratu
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // drugi div
	
	function func(num) {
		return num * num * num; // podnosimy do sześcianu
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Teraz w każdym z modułów możemy używać dowolnych zmiennych i funkcji, nie obawiając się, że będą one kolidować z innymi zmiennymi i funkcjami naszego skryptu.

Na przykład, oba elementy przechowujemy w zmiennej elem - każdy w swojej zmiennej swojego modułu. Gdyby nie było tutaj modułów, musielibyśmy wprowadzić różne zmienne do przechowywania naszych elementów. A z modułami możemy spokojnie używać naszej zmiennej, nie obawiając się, że ktoś zechce również użyć tej zmiennej.