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

Нека имаме два div елементи со броеви:

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

Ајде да направиме така што при клик на првиот div неговата вредност да се подигне на квадрат, а при клик на вториот div - на коцка.

Ќе го организираме нашиот код во вид на два модули:

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