Javascript 즉시실행함수(IIFE), 클로져(Closure)

즉시 실행 함수(IIFE)

• Immediately Invoked Function Expression
• 바로 실행이 되는 함수 형태
• 사용은 모듈을 만들거나 루프문안에서 각 항목에 이벤트를 걸때 사용 외 기타

(function () {
  //...
})();

 

클로져(Closure)

• 중괄호({ ... }) 안의 즉시 실행 함수
• 이미 실행이 종료된 함수의 변수나 함수를 참조할 수 있는 링크를 가진 내부 함수
• 아래의 예에서 inner함수의 경우 크롬디버깅으로 확인시 Closure스코프가 보임

function outer(x) {
  function inner(y) {
    return x + y;
  }
  return inner;
}
const inner = outer(5);
inner(3); // 5 + 3 == 8

 

클로져를 활용한 루프문에 이벤트 주기

//각각의 요소에 매칭된 seq값이 적용됨
for(var i=0; i<datas.count; i++) {
  //...
  $("#"+id).on('click', 
    (function() {
      var seq = datas[i]["seq"];
      return function() {
        countAdd(seq);
      }
    })()
  );
}

//아래 형태와 같이 쓸 경우 seq값이 계속 덮어써져 버림(마지막 seq값만 모든 요소의 클릭에 적용됨)
for(var i=0; i<datas.count; i++) {
  //...
  $("#"+id).on('click', 
    var seq = datas[i]["seq"];
    return function() {
      countAdd(seq);
    }
  );
}