[Clouser] 아주 아주 간단한 클로저 기본

언제부턴가 개념을 직접 설명하기 보다는

잘 정리된 공식 문서나 교재를 보는 게 낫다는 생각이 드네요.

 

* https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

* 인사이드 자바스크립트

 

실행 컨텍스트니 하는 개념들은 위의 내용들을 참조하는 게 나을 것 같습니다.

여기에서 간단하게 말하고 싶은 건 따로 있습니다.

고차함수가 클로저를 반환할 때마다 실행 컨텍스트가 다르다는 것입니다.

그러므로 아래의 코드를 이해할 수 있습니다.

const getCounter = () => {
  const count = () => {
    result.total += 1;
  };

  let result = {
    count,
    total: 0,
  };

  return result;
};

const counterA = getCounter();
counterA.count();
counterA.count();

const counterB = getCounter();
counterB.count();
console.log(counterA.total, counterB.total); // 2, 1

count 함수가 클로저인 이유는 함수 외부의 변수인 result 객체를 초기값으로 묶어두는 채로 반환되기 때문입니다.

외부 환경에 대한 변수 객체가 아직 살아 있는 상태입니다.

getCounter() 함수의 역할은 끝났지만 인스턴스가 계속 유지되고 있기 때문에

counterA.count(), counterB.count()가 성공적으로 호출되며 두 클로저의 실행 컨텍스트가 다르기 때문에

total 값이 다르게 출력되는 걸 확인할 수 있습니다.