Aplicación Práctica

Supongamos que tenemos dos divs con números:

html<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:

javascript;(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.