Gyakorlati alkalmazás

Tegyük fel, hogy adott két div számokkal:

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

Tegyük meg, hogy az első div-re kattintva az értéke négyzetre emelkedjen, a második div-re kattintva pedig köbre emelkedjen.

Szervezzük a kódunkat két modul formájában:

javascript;(function() {
  let elem = document.querySelector('#div1'); // első div
  
  function func(num) {
    return num * num; // négyzetre emeljük
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // második div
  
  function func(num) {
    return num * num * num; // köbre emeljük
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Most mindegyik modulban használhatunk bármilyen változót és függvényt anélkül, hogy attól kellene félnünk, hogy azok ütközni fognak a szkriptünk más változóival és függvényeivel.

Például mindkét elemet a elem változóban tároljuk - mindegyik a saját moduljának saját változójában. Ha itt nem lennének modulok, akkor különböző változókat kellene bevezetnünk az elemeink tárolásához. A modulokkal azonban nyugodtan használhatjuk a változónkat anélkül, hogy attól kellene félnünk, hogy valaki más is ugyanezt a változót szeretné használni.