JavaScript에서 클로저를 통한 모듈에 매개변수 전달

모듈 내부에 값을 하드코딩하지 않고, 모듈 자체의 매개변수(즉, 즉시 실행 함수의 매개변수)로 전달하는 것이 좋은 관행입니다:

;(function(arg1, arg2) { // 매개변수가 변수로 들어갑니다
	
})(1, 2); // 몇 가지 매개변수를 전달합니다

예제를 통해 살펴보겠습니다. 숫자가 있는 div와 버튼이 있다고 가정해 보겠습니다:

<div id="div">3</div>
<button id="btn">click me</button>

또한 특정 모듈이 있다고 가정해 보겠습니다:

;(function() {
	let div = document.querySelector('#div');
	let btn = document.querySelector('#btn');
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})();

보시다시피, 요소들의 선택자가 모듈 코드에 하드코딩되어 있습니다. 더 나은 해결책은 이들을 모듈의 매개변수로 전달하는 것입니다. 이렇게 하면 나중에 쉽게 변경할 수 있습니다. 우리 모듈을 수정해 보겠습니다:

;(function(selector1, selector2) {
	let div = document.querySelector(selector1);
	let btn = document.querySelector(selector2);
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})('#div', '#btn');

버튼 하나와 숫자를 입력하는 세 개의 input이 주어져 있습니다. 버튼을 클릭하면 입력된 숫자들의 합을 콘솔에 출력하세요. 모듈을 사용하여 이 문제를 구현하세요.