Praktyczne zastosowanie

Załóżmy, że mamy dwa dive z liczbami:

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

Zróbmy tak, aby po kliknięciu na pierwszy div jego wartość była podnoszona do kwadratu, a po kliknięciu na drugi div - do sześcianu.

Zorganizujmy nasz kod w postaci dwóch modułów:

javascript;(function() {
  let elem = document.querySelector('#div1'); // pierwszy div
  
  function func(num) {
    return num * num; // podnosimy do kwadratu
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // drugi div
  
  function func(num) {
    return num * num * num; // podnosimy do sześcianu
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Teraz w każdym z modułów możemy używać dowolnych zmiennych i funkcji, nie obawiając się, że będą one kolidować z innymi zmiennymi i funkcjami naszego skryptu.

Na przykład, oba elementy przechowujemy w zmiennej elem - każdy w swojej zmiennej swojego modułu. Gdyby nie było tutaj modułów, musielibyśmy wprowadzić różne zmienne do przechowywania naszych elementów. A z modułami możemy spokojnie używać naszej zmiennej, nie obawiając się, że ktoś zechce również użyć tej zmiennej.