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

Нека имаме два 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 - секој во својата променлива од својот модул. Доколку овде немаше модули, ќе требаше да се внесат различни променливи за чување на нашите елементи. А со модули можеме слободно да ја користиме нашата променлива, без страв дека некој друг ќе сака да ја користи истата променлива.