Praktische toepassing

Stel we hebben twee div's met getallen:

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

Laten we ervoor zorgen dat bij een klik op de eerste div de waarde ervan wordt gekwadrateerd, en bij een klik op de tweede div - tot de derde macht wordt verheven.

Laten we onze code organiseren als twee modules:

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

;(function() {
	let elem = document.querySelector('#div2'); // tweede div
	
	function func(num) {
		return num * num * num; // verhef tot de derde macht
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nu kunnen we in elk van de modules willekeurige variabelen en functies gebruiken, zonder bang te hoeven zijn dat ze in conflict komen met andere variabelen en functies in ons script.

We slaan bijvoorbeeld beide elementen op in de variabele elem - elk in zijn eigen variabele van zijn eigen module. Als er hier geen modules waren, zouden we verschillende variabelen moeten introduceren om onze elementen op te slaan. Met modules kunnen we gerust onze variabele gebruiken, zonder bang te hoeven zijn dat iemand anders deze variabele ook wil gebruiken.