Praktična primena

Neka su nam data dva div-a sa brojevima:

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

Učinimo da klik na prvi div podiže njegovu vrednost na kvadrat, a klik na drugi div - na kub.

Organizovaćemo naš kod u obliku dva modula:

javascript;(function() {
  let elem = document.querySelector('#div1'); // prvi div
  
  function func(num) {
    return num * num; // podići na kvadrat
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // drugi div
  
  function func(num) {
    return num * num * num; // podići na kub
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Sada u svakom od modula možemo koristiti bilo koje promenljive i funkcije, bez straha da će one doći u sukob sa drugim promenljivim i funkcijama našeg skripta.

Na primer, oba elementa čuvamo u promenljivoj elem - svaki u svojoj promenljivoj svog modula. Da ovde nije bilo modula, moralo bi se uvesti različite promenljive za čuvanje naših elemenata. A sa modulima možemo slobodno koristiti našu promenljivu, bez straha da će neko drugi takođe hteti da koristi ovu promenljivu.