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

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

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

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

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

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

javascript;(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);
  });
})();

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

javascript;(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');