Gyakorlati alkalmazás

Tegyük fel, hogy adott két div számokkal:

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

Tegyük meg, hogy az első div-re kattintva az értéke négyzetre emelkedjen, a második div-re kattintva pedig köbre emelkedjen.

Szervezzük a kódunkat két modul formájában:

;(function() {
	let elem = document.querySelector('#div1'); // első div
	
	function func(num) {
		return num * num; // négyzetre emeljük
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // második div
	
	function func(num) {
		return num * num * num; // köbre emeljük
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Most mindegyik modulban használhatunk bármilyen változót és függvényt anélkül, hogy attól kellene félnünk, hogy azok ütközni fognak a szkriptünk más változóival és függvényeivel.

Például mindkét elemet a elem változóban tároljuk - mindegyik a saját moduljának saját változójában. Ha itt nem lennének modulok, akkor különböző változókat kellene bevezetnünk az elemeink tárolásához. A modulokkal azonban nyugodtan használhatjuk a változónkat anélkül, hogy attól kellene félnünk, hogy valaki más is ugyanezt a változót szeretné használni.