Praktické aplikácie

Majme dva prvky div s číslami:

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

Zaistime, aby po kliknutí na prvý prvok div sa jeho hodnota umocnila na druhú, a po kliknutí na druhý prvok div - na tretiu.

Usporiadajme náš kód do dvoch modulov:

javascript;(function() {
  let elem = document.querySelector('#div1'); // prvý prvok div
  
  function func(num) {
    return num * num; // umocníme na druhú
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // druhý prvok div
  
  function func(num) {
    return num * num * num; // umocníme na tretiu
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Teraz môžeme v každom z modulov používať ľubovoľné premenné a funkcie, bez obáv, že budú konfliktovať s inými premennými a funkciami nášho skriptu.

Napríklad, oba elementy ukladáme do premennej elem - každý do svojej premennej svojho modulu. Keby tu neboli moduly, museli by sme zaviesť rôzne premenné pre ukladanie našich elementov. S modulmi môžeme pokojne používať našu premennú, bez obáv, že niekto iný bude chcieť použiť tú istú premennú.