JS Closure(클로저)

오성인·2023년 4월 5일
0

JS

목록 보기
22/27
post-thumbnail
post-custom-banner
// 클로저(closure)
// 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다 (from MDN)

// 렉시컬 환경(LexicalEnvironment)
// 1. !JS엔진은 함수를 어디서 ‘호출했는지’가 아니라 함수를 어디에 ‘정의했는지’에 따라 상위 스코프를 결정!

// 2. 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 기반하여 외부 환경(outer)이 결정된다.

// 3. 외부 함수보다 중첩 함수가 더 오래 유지되는 경우, callstack에서 외부 함수가 사라져도 여전히 외부 함수의 요소(주로 변수)를 참조가능한 것 => 클로저
// 함수와 그 함수가 선언된 렉시컬 환경[렉시컬 기록(현재 스코프 요소) + 아웃터(상위 스코프 요소 == 외부 함수의 정보)]과의 조합

// 어떻게 가능할까요? (feat. 똑똑한 가비지 컬렉터)
// 안쓰는 것만 가져가요! outer 함수의 렉시컬 환경은 참조하는 곳이 있으니 놔둘게욥! => callstack에서 외부함수가 사라져도 참조하는 요소는 남겨둔다!!

// 예시
// 카운트 상태 변경 함수 #3
const increase = (function () {
  // 카운트 상태 변수
  // outer/외부 환경
  let num = 0;

  // 클로저
  // 리턴하면서 increase는 콜스텍에서 사라짐!
  return function () {
    return ++num; // num이란 변수는 outer에서 여전히 참조!
  };
})();

// 이전 상태값을 유지
console.log(increase()); //1
console.log(increase()); //2
console.log(increase()); //3

//   결론(그래서 이걸 왜써?)
// 캡슐화(encapsulation)와 정보 은닉
// JS는 public, private, protected 같은 접근을 제한할 수 있는 기능 없음
// -> 즉, 별도의 조치를 취하지 않으면 기본적으로 외부 공개가 된다는 의미!
// 클로저는 상태(state)가 의도치 않게 변경되지 않도록 안전하게 은닉(information hiding) 하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용합니다.
profile
기여하는 개발자
post-custom-banner

0개의 댓글