클로저

(1) 클로저의 개념

💡 [MDN]
클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다

• 대체 무슨 말이람?
• 코드를 보면서 함수가 선언된 렉시컬 환경이 무슨 말인지 알아보자.

const x = 1;

function outerFunc() {
  const x = 10;
  function innerFunc() {
    console.log(x); // 10
  }

  innerFunc();
}

outerFunc();

• outerFunc 함수 내부에서 중첩 함수 innerFunc가 정의되고 호출되었다.
• 이때 중첩 함수 innerFunc 의 상위 스코프는 외부 함수 outerFunc 의 스코프다.
• 따라서 중첩함수 innerFunc내부에서 자신을 포함하고 있는 외부 함수 outerFunc 의 x 변수에 접근할 수 있다.

const x = 1;

// innerFunc()에서는 outerFunc()의 x에 접근할 수 없죠.
// Lexical Scope를 따르는 프로그래밍 언어이기 때문
function outerFunc() {
  const x = 10;
  innerFunc(); // 1
}

function innerFunc() {
  console.log(x); // 1
}

outerFunc();

• 만약 innerFunc함수가 outerFunc 함수의 내부에서 정의된 중첩 함수가 아니라면 innerFunc 함수를 outerFunc 함수의 내부에서 호출한다 하더라도 outerFunc함수의 변수에 접근할 수 없다.
• outerFunc내에서 innerFunc가 '호출'되고 있음에도 불구하고 '선언'은 밖에서 되었기 때문에 스코프를 공유하지 않는다!

1. 렉시컬 스코프

📌 렉시컬 스코프

• 자바스크립트 엔진은 함수를 어디서 '호출'했는지가 아니라 함수를 어디에 '정의'했는지에 따라 상위 스코프를 결정한다. 이를 렉시컬 스코프(정적 스코프)라 한다.

const x = 1;

function foo() {
  const x = 10;
  bar(); // bar 함수 '호출'
}

function bar() { // bar 함수 '정의'
  console.log(x);
}

foo(); // 1
bar(); // 1

• foo 함수와 bar 함수는 모두 전역에서 정의된 함수다.
• 함수의 상위 스코프는 함수를 어디서 정의했느냐에 따라 결정되므로 foo함수와 bar함수의 상위 스코프는 "전역" 이다.
• 함수를 어디서 호출하는지는 함수의 상위스코프 결정에 어떤 영향도 주지 못한다.
• 즉, 함수의 상위 스코프는 함수를 정의한 위치에 의해 정적으로 결정되고 변하지 않는다.

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

• 위 예제처럼 함수가 정의된 환경(위치)와 호출된 환경(위치)는 다를 수 있다.
• 따라서 호출되는 환경과 관계 없이 정의된 환경, 즉 상위 스코프(함수 정의가 위치하는 스코프)를 기억헤야 한다.
• 이를 위해 함수는 자신의 내부 슬롯 [[Environmnet]]에 자신이 정의된 환경, 즉 상위 스코프의 참조를 저장한다.

const x = 1;

function foo() {
  const x = 10;

  // 상위 스코프는 함수 정의 환경(위치)에 따라 결정된다.
  // 함수 호출 위치와 상위 스코프는 아무런 관계가 없다.
  bar();
}

// 함수 bar는 자신의 상위 스코프, 즉 전역 렉시컬 환경을 [[Environment]]에 저장하여 기억한다.
function bar() {
  console.log(x);
}

foo();
bar();

3. 클로저와 렉시컬 환경

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

const x = 1;

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

const innerFunc = outer();
innerFunc();

• outer 함수를 호출하면 중첩함수 inner 를 반환하고 생명주기를 마감한다.
• 즉, outer의 실행이 종료되면 outer 함수의 실행 컨텍스트는 실행 컨텍스트 스택에서 제거(pop) 된다.
• 이때 outer 함수의 실행 컨텍스트가 제거되었으므로 outer 함수의 지역변수 x 또한 생명 주기를 마감한다. 따라서 outer 함수의 지역변수 x는 더는 유효하지 않게 되어 x 변수에 접근할 방법은 달리 없어보인다.
• 그러나 위 코드의 실행 결과는 outer 함수의 지역 변수 x의 값인 10 이다.
• inner 함수가 innerFunc에 전달되었는데, inner 함수는 outer 함수의 렉시컬 환경을 "여전히" 참조하고 있다.
• 즉, outer 실행 컨텍스트는 실행 컨텍스트 스택에서 제거(pop) 되지만, outer 함수의 렉시컬 환경까지 소멸하는 것은 아니다. 그러므로 outer 함수의 지역변수 x 참조 가능하다.
• cf) 이것이 가능한 이유 : 똑똑한 가비지 컬렉터는 사용하지 않는 것만 가져가는데, outer 함수의 렉시컬 환경은 참조하는 곳이 있으니 놔두는 것이다!

(2) 클로저의 활용

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

// 카운트 상태 변경 함수 #1
// 함수가 호출될 때마다 호출된 횟수를 누적하여 출력하는 카운터를 구현해요!

// 카운트 상태 변수
let num = 0;

// 카운트 상태 변경 함수
const increase = function () {
  // 카운트 상태를 1만큼 증가시킨다.
  return ++num;
};

console.log(increase()); // 1
num = 100; // 치명적인 단점이 있어요. 정보 접근을 막을 수 없어요.
console.log(increase()); // 101
console.log(increase()); // 102

• 보완해야 할 사항
  • 카운트의 상태(num 변수의 값) 은 increase()가 호출되기 전까지 변경되지 않고 유지되어야 한다.
  • 이를 위해 카운트의 상태(num 변수의 값)은 increase()만 변경할 수 있어야 한다.
  • 전역변수 numdmf increase() 함수의 지역변수로 바꾸어보자.

// 카운트 상태 변경 함수 #2
const increase = function () {
  // 카운트 상태 변수
  let num = 0;

  // 카운트 상태를 1만큼 증가시킨다.
  return ++num;
};

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

• 보완해야 할 사항
  • 전역변수 num을 increase() 함수의 지역변수로 변경하여 의도치 않은 상태 변경은 방지했다. 이제 num 변수의 상태는 increase() 함수만 변경할 수 있다.
  • 하지만 increase() 함수가 호출될 때마다 지역변수 num이 초기회된다.
  • 즉, 상태가 변경되기 이전 상태를 유지하지 못한다.
  • 이제 클로저를 사용해 보자.

// 카운트 상태 변경 함수 #3
const increase = (function () {
  // 카운트 상태 변수
  let num = 0;

  // 클로저
  return function () {
    return ++num;
  };
}());

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

• 위 코드가 실행되면 즉시 실행 함수가 호출되고, 즉시 실행 함수가 반환한 함수가 increase 변수에 할당된다.
• increase 변수에 할당된 함수는 자신이 정의된 위치에 의해 결정된 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하는 클로저다.
• 즉시 실행 함수는 호출된 이후 소멸되지만, 즉시 실행 함수가 반환한 클로저는 increase 변수에 할당되어 호출된다.
• 이때 즉시 실행 함수가 반환한 클로저는 자신이 정의된 위치에 의해 결정된 상위 스코프인 즉시 실행 함수의 렉시컬 환경을 기억하고 있다.
• 따라서 즉시 실행 함수가 반환한 클로저는 카운트 상태를 유지하기 위한 자유 변수 num을 언제 어디서 호출하든지 참조하고 변경할 수 있다.

📌 결론
클로저는 상태(state)가 의도치 않게 변경되지 않도록 안전하게 은닉(information hiding) 하고 특정 함수에게만 상태 변경을 허용하여 상태를 안전하게 변경하고 유지하기 위해 사용한다.