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

Пусть у нас даны два дива с числами:

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

Давайте сделаем так, чтобы по клику по первому диву его значение возводилось в квадрат, а по клику по второму диву - в куб.

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

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

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

Теперь в каждом из модулей мы можем использовать любые переменные и функции, не боясь того, что они будут конфликтовать с другими переменными и функциями нашего скрипта.

Например, оба элемента мы храним в переменной elem - каждый в своей переменной своего модуля. Если бы модулей здесь не было, пришлось бы вводить разные переменные для хранения наши элементов. А с модулями мы можем спокойно использовать нашу переменную, не боясь того, что кто-то захочет также использовать эту переменную.