Praktisk anvendelse

La oss si at vi har to div-er med tall:

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

La oss gjøre det slik at ved klikk på den første div-en blir verdien dens opphøyd i andre, og ved klikk på den andre div-en - i tredje.

La oss organisere koden vår som to moduler:

javascript;(function() {
  let elem = document.querySelector('#div1'); // første div
  
  function func(num) {
    return num * num; // opphøy i andre
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // andre div
  
  function func(num) {
    return num * num * num; // opphøy i tredje
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Nå kan vi i hver av modulene bruke hvilke som helst variabler og funksjoner, uten å frykte at de vil komme i konflikt med andre variabler og funksjoner i skriptet vårt.

For eksempel lagrer vi begge elementene i variabelen elem - hver i sin variabel i sin modul. Hvis det ikke var moduler her, måtte man introdusere forskjellige variabler for å lagre elementene våre. Men med moduler kan vi trygt bruke vår variabel, uten å frykte at noen andre vil bruke den samme variabelen.