Aplicação Prática

Suponha que temos duas divs com números:

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

Vamos fazer com que ao clicar na primeira div, seu valor seja elevado ao quadrado, e ao clicar na segunda div - ao cubo.

Vamos organizar nosso código em dois módulos:

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

;(function() {
	let elem = document.querySelector('#div2'); // segunda div
	
	function func(num) {
		return num * num * num; // eleva ao cubo
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Agora em cada um dos módulos podemos usar quaisquer variáveis e funções, sem medo de que elas entrem em conflito com outras variáveis e funções do nosso script.

Por exemplo, ambos os elementos são armazenados na variável elem - cada um em sua própria variável do seu próprio módulo. Se não houvesse módulos aqui, teríamos que introduzir variáveis diferentes para armazenar nossos elementos. E com módulos podemos usar tranquilamente nossa variável, sem medo de que alguém queira usar essa mesma variável.