Pratik Uygulama

İki div elementi ve içlerinde sayılar verildiğini varsayalım:

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

İlk div'e tıklandığında değerinin karesinin alınmasını, ikinci div'e tıklandığında ise küpünün alınmasını sağlayalım.

Kodumuzu iki modül halinde düzenleyelim:

javascript;(function() {
  let elem = document.querySelector('#div1'); // ilk div
  
  function func(num) {
    return num * num; // karesini al
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

;(function() {
  let elem = document.querySelector('#div2'); // ikinci div
  
  function func(num) {
    return num * num * num; // küpünü al
  }
  
  elem.addEventListener('click', function() {
    this.textContent = func(elem.textContent);
  });
})();

Artık her modülde, değişken ve fonksiyonların betiğimizin diğer değişken ve fonksiyonlarıyla çakışacağından korkmadan her türlü değişkeni ve fonksiyonu kullanabiliriz.

Örneğin, her iki elementi de elem değişkeninde saklıyoruz - her biri kendi modülünün kendi değişkeninde. Eğer burada modüller olmasaydı, elementlerimizi saklamak için farklı değişkenler tanımlamak zorunda kalırdık. Modüllerle birlikte, bir başkasının bu değişkeni kullanmak isteyeceğinden korkmadan değişkenimizi rahatça kullanabiliriz.