Aplicación Práctica

Supongamos que tenemos dos divs con números:

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

Hagamos que al hacer clic en el primer div, su valor se eleve al cuadrado, y al hacer clic en el segundo div, al cubo.

Organicemos nuestro código en forma de dos módulos:

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

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

Ahora en cada uno de los módulos podemos usar cualquier variable y función, sin temor a que entren en conflicto con otras variables y funciones de nuestro script.

Por ejemplo, ambos elementos los almacenamos en la variable elem - cada uno en su variable dentro de su módulo. Si no hubiera módulos aquí, tendríamos que introducir variables diferentes para almacenar nuestros elementos. Y con los módulos podemos usar tranquilamente nuestra variable, sin temor a que alguien más quiera usar también esta variable.