Pratik Uygulama

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

<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:

;(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.