클로저 다다시 정리하기

클로저의 개념(정의)

함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.

외부 함수보다 중첩함수가 더 오래 유지되는 경우, 중첩 함수는 이미 생명주기가종료한 외부함수의 변수를 (여전히) 참조할 수 있다. 이 개념에서 중첩함수가 클로저이다.

※ 렉시컬 환경에는 2가지가 있다.

• 전역 렉시컬 환경 : 프로그램이 시작될 때 생성되는 환경 전체 코드 범위에 해당하는 렉시컬 환경이다.

• 함수 렉시컬 환경 : 함수가 호출될 때 마다 생성되는 환경으로 각 함수에 해당하는 렉시컬 환경이다.

function outer() {
  const x = 10;
  const inner = function () {
    console.log(x);
  };
  return inner;
}


// outer함수를 실행해서 innerFunc에 담는다.
// outer함수의 return 부분을 innerFunc에 담는다
const innerFunc = outer();
innerFunc()

클로저의 활용

클로저는 주로 상태를 안전하게 변경하고 유지하기 위해 사용한다.

before

let num = 0;

const increase = function () {
  return ++num;
};

console.log(increase());
console.log(increase());
console.log(increase());

// 보완해야 할 사항
// 1. 카운트 상태 (num 변수의 값)
// => increase 함수가 호출되기 전까지는 변경되지 x
// 2. 이를 위해서 count 상태는 increase 함수만이 변경이 가능
// 3. 전역 변수 num 이 문제다.

after

const increase = (function () {
  let num = 0;

  return function () {
    return ++num;
  };
})();

console.log(increase());
console.log(increase());
console.log(increase());

// [코드 설명]
// 1. 위 코드가 실행되면, '즉시 실행 함수'가 호출 !! => 함수 반환 => increase에 할당
// 2. increase변수에 할당된 함수는 자신이 정의된 위치에 의해서 결정된 상위 스코프인 즉시 실행함수의 렉시컬 환경을 기억
// 클로저 -> let num = 0 을 기억한다.
// 3. 즉시 실행 함수는 즉시 소멸된다.
// 4. 결론 : num은 초기화 x 외부에서 접근할 수 없는 은닉된 값 ! 의도되지 않은 변경도 걱정 x