Praktisk anvendelse

La oss si at vi har to div-er med tall:

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

La oss gjøre det slik at ved klikk på den første div-en blir verdien dens opphøyd i andre, og ved klikk på den andre div-en - i tredje.

La oss organisere koden vår som to moduler:

;(function() {
	let elem = document.querySelector('#div1'); // første div
	
	function func(num) {
		return num * num; // opphøy i andre
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // andre div
	
	function func(num) {
		return num * num * num; // opphøy i tredje
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nå kan vi i hver av modulene bruke hvilke som helst variabler og funksjoner, uten å frykte at de vil komme i konflikt med andre variabler og funksjoner i skriptet vårt.

For eksempel lagrer vi begge elementene i variabelen elem - hver i sin variabel i sin modul. Hvis det ikke var moduler her, måtte man introdusere forskjellige variabler for å lagre elementene våre. Men med moduler kan vi trygt bruke vår variabel, uten å frykte at noen andre vil bruke den samme variabelen.