JavaScript - closure(클로저)

클로저란

간단히 말하면 함수 내부에 함수를 클로저라고 한다.
클로저는 외부함수의 변수를 접근하여 사용할 수 있다.

예제를 통해 깊게 알아보자

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  return innerFunc;
}

/**
 *  함수 outerFunc를 호출하면 내부 함수 innerFunc가 반환된다.
 *  그리고 함수 outerFunc의 실행 컨텍스트는 소멸한다.
 */
var inner = outerFunc();
inner(); // 10
}

outerFunc(); // 10

outerFunc 외부함수내에 innerFunc이라는 내부함수를 작성하였다. var x = 10;는 외부함수의 지역변수이다.

외부함수의 생명주기가 끝나면 가비지컬렉션이 대상이 되어(실행 컨텍스트 소멸) 변수에 접근할 수가 없는데
내부함수의 [[scope]](스코프체인)을 통해 참조되기 때문에 변수 x를 참조할 수 있다.
그 결과 outerFunc();를 호출할 때 10이 찍히게 되는 것을 볼 수 있다.

다시 말해 클로저는
자신이 생성될 때의 환경(Lexical environment)을 기억하여 이미 생명 주기가 끝난 외부함수의 변수를 참조하는 함수이다.
위에서는 innerFunc가 클로저이다.

클로저가 유용하게 사용되는 경우

자신이 생성될 때의 환경(Lexical environment)을 기억해야 하므로 메모리 차원에서 손해지만 유용하게 사용되는 경우들이 있다.

• 상태 유지 : 현재 상태를 기억하고 변경된 최신 상태를 유지할 수 있다.
• 전역 변수의 사용 억제 : 전역변수는 접근이 가능하여 변경위험이 있어서 클로저의 외부함수의 변수(지역변수)로 사용할 수 있다.
• 정보의 은닉 : 외부함수의 변수를 private 키워드의 기능으로 사용할 수 있다.

참고자료 :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

https://poiemaweb.com/js-closure