🧠 되새김

📎 스코프 체인

: 스코프의 실체는 실행 컨텍스트의 렉시컬 환경이다. 이 렉시컬 환경은 자신의 '외부 렉시컬 환경에 대한 참조'를 통해 상위 렉시컬 환경과 연결된다. 이것이 스코프 체인이다.

📎 렉시컬 스코프(정적 스코프)

: 자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위스코프를 결정한다.
: 렉시컬 환경의 '외부 렉시컬 환경에 대한 참조'에 저장할 참조값, 즉 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경(위치)에 의해 결정된다.

📎 함수 객체의 내부 슬롯 [[Environment]]

: 함수는 자신의 내부 슬롯 [[Environment]]에 자신의 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

🔥 클로저(closure)

• 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명주기가 종료한 외부 함수의 변수를 참조할 수 있는 중첩함수를 클로저라고 한다.
• 자바스크립트의 모든 함수는 자신의 상위 스코프를 기억한다.
• 모드 함수가 기억하는 상위 스코프는 함수를 어디서 호출하든 상관없이 유지된다. 따라서 함수는 언제나 자신이 기억하는 상위 스코프의 식별자를 참조할 수 있으며 식별자에 바인딩된 값을 변경할 수도 있다.

👾#01

const x = 1;

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

const innerFnc = outer();
innerFnc(); // 10

👉🏻 생명주기가 종료한 외부 함수(outer)의 변수(x)를 참조할 수 있는 중첩함수(inner)를 클로저라고 한다!

👉🏻 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거되지만 outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다.

● 클로저의 활용

• 클로저는 상태를 안전하게 변경하고 유지하기 위해 사용한다.
• 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.

👾 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환

const counter = (function(){
  // 자유 변수
  let counter = 0;
  
  return function(fn){
    counter = fn(counter);
    return counter;
  };
}());

// 보조 함수
function increase(num){
  return ++num;
}
// 보조 함수
function decrease(num){
  return --num;
}

// 보조 함수를 전달하여 호출
console.log(counter(increase)); // 1
console.log(counter(increase)); // 2
// 자유 변수를 공유한다.
console.log(counter(decrease)); // 1
console.log(counter(decrease)); // 0