Практичка примена

Нека су нам дата два div елемента са бројевима:

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

Хајде да урадимо тако да при клику на први div његова вредност буде квадрирана, а при клику на други div - да буде квадрирана на куб.

Организоваћемо наш код у виду два модула:

javascript;(function() {
  let elem = document.querySelector('#div1'); // први div
  
  function func(num) {
    return num * num; // квадрирамо
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // други div
  
  function func(num) {
    return num * num * num; // квадрирамо на куб
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Сада у сваком од модула можемо да користимо било које променљиве и функције, без страха да ће доћи у сукоб са другим променљивима и функцијама нашег скрипта.

На пример, оба елемента чувамо у променљивој elem - сваки у својој променљивој свог модула. Да овде није било модула, морали бисмо да уводимо различите променљиве за чување наших елемената. А са модулима можемо слободно да користимо нашу променљиву, без страха да ће неко други такође хтети да користи ову променљиву.