실용적인 적용

두 개의 숫자가 있는 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 변수에 저장합니다. 각 요소는 자체 모듈의 자체 변수에 저장됩니다. 여기에 모듈이 없었다면 요소를 저장하기 위해 다른 변수를 도입해야 했을 것입니다. 그러나 모듈을 사용하면 누군가 이 변수를 사용하려고 할까봐 걱정하지 않고도 우리의 변수를 자유롭게 사용할 수 있습니다.