클로저(Closure)

'클로저'는 함수형 프로그래밍 언어에서 등장하는 보편적인 특성! 난 처음보는데..?!

클로저란, 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수 B를 외부로 전달할 경우, A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상입니다.

분명 클로저를 정의했지만, 막상 이해는 되지 않습니다. 인터넷과 도서에서 찾아봐도 쉽게 이해가 되지 않습니다 ㅠㅠ..

 

그러면 예제를 통해서 어떤 것인지 맛을 보고 개념을 정리해봅니다.

 

var outer = function() {
  var a = 1;
  var inner = function() {
    return ++a;
  }
  return inner;
}
var outer2 = outer();
console.log(outer2());	// 2
console.log(outer2());	// 3

outer의 지역변수인 a가 outer()의 실행 컨텍스트가 끝남과 동시에 사라질 것으로 예상되었지만,

 

그대로 유지되어 +1 이 된 것을 확인하실 수 있습니다.

 

이는 inner()가 outer2를 통해 호출될 가능성이 남아있기 때문에 가비지 컬렉터의 수집 대상에서 제외된 것입니다.

 

사실, 클로저는 알게 모르게 사용되고 있었습니다.

 

(function() {
  var a = 0;
  var itvIdx = null;
  var inner = function() {
    if(++a >= 10) {
      clearInterval(itvIdx);
    }
    console.log(a);
  }
  itvIdx = setInterval(inner, 1000);
})();

(function() {
  var cnt = 0;
  var btn = document.createElement('button');
  btn.innerText = 'click';
  btn.addEventListener('click', function() {
    console.log(++cnt, 'CLICKED!');
  })
  document.body.appendChild(btn);
})();

위 즉시 실행 함수를 살펴보시죠!

 

먼저, setInterval()을 통해 inner()가 10초 동안 호출될 겁니다.

 

다음으로 DOM Button EventListener 의 경우, button이 사라지지 않는 한 cnt가 클로저 될 겁니다.

 

클로저는 객체지향과 함수형 모두를 아우르는 매우 중요한 개념이라고 합니다.

 

다만, 메모리 누수의 위험이 있기 때문에 무분별한 관리가 안되는 클로저 사용은 조심해야 합니다.

 

개발자가 잘 관리한다면, 메모리 누수가 아닌 의도대로 설계한 '메모리 소모'가 될 수 있습니다.

 

관리방법은 어렵지 않습니다. : )

 

참조 카운트를 0으로 만들면 되는데, 식별자에 참조형이 아닌 기본형 데이터를 할당하면 됩니다.

null 혹은 undefined

 

 

 

위 두 가지 예제에서 참조 카운트를 0으로 만드는 방법은 아래와 같습니다. (DOM Event의 경우, removeEvent)

var outer = function() {
  var a = 1;
  var inner = function() {
    return ++a;
  }
  return inner;
}
var outer2 = outer();
console.log(outer2());	// 2
console.log(outer2());	// 3
outer2 = null;

(function() {
  var a = 0;
  var itvIdx = null;
  var inner = function() {
    if(++a >= 10) {
      clearInterval(itvIdx);
      inner = null;
    }
    console.log(a);
  }
  itvIdx = setInterval(inner, 1000);
})();

 

다음 글에서 클로저의 활용 예제 및 사례에 대해 정리해보겠습니다. : )

 

' 클로저의 활용 '

 

 

 

 

[출처] '코어 자바스크립트 - 핵심 개념과 동작 원리로 이해하는 자바스크립트 프로그래밍', 정재남 지음