Aplicação Prática

Suponha que temos duas divs com números:

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

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