Praktické aplikácie

Majme dva prvky div s číslami:

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

Zaistime, aby po kliknutí na prvý prvok div sa jeho hodnota umocnila na druhú, a po kliknutí na druhý prvok div - na tretiu.

Usporiadajme náš kód do dvoch modulov:

;(function() {
	let elem = document.querySelector('#div1'); // prvý prvok div
	
	function func(num) {
		return num * num; // umocníme na druhú
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // druhý prvok div
	
	function func(num) {
		return num * num * num; // umocníme na tretiu
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Teraz môžeme v každom z modulov používať ľubovoľné premenné a funkcie, bez obáv, že budú konfliktovať s inými premennými a funkciami nášho skriptu.

Napríklad, oba elementy ukladáme do premennej elem - každý do svojej premennej svojho modulu. Keby tu neboli moduly, museli by sme zaviesť rôzne premenné pre ukladanie našich elementov. S modulmi môžeme pokojne používať našu premennú, bez obáv, že niekto iný bude chcieť použiť tú istú premennú.