[Javascript] 클로져

함수형 프로그래밍 책을 읽다보면 빠지지 않는 요 단어. 클로져..

넌 도대체 뭔디 그리 유명한고..

 

자바스크립트의 교과서 같은 mdn에 쳐보니,

다음과 같이 말하고 있다.

 

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

함수와 함수가 선언된 어휘적 환경의 조합...(네..??😮 이게 뭔말인고)

 

원래 영어로 읽으면 더 잘 이해되던데.. 요 첫문장은 뭔말인지 모르겠다. 글 쓰신 분도 그렇게 생각 했는지 곧바로 In other words(다른 말로 표현하자면)라면서.. 더 쉽게 표현해주고 있다.

 

In other words, a closure gives you access to an outer function's scope from an inner function. 

 

어떤 함수(컨텍스트)와 그 함수 내부에 선언된 함수 사이에서 발생하는 어떤 케미에 관련된 거라고 말하고 있다. 함수 내외부의 어떤 something??? 어떤..😊😊😊..

 

실행 컨텍스트에서 `lexicalEnvironment`라는 개념이 있는데, 함수가 실행될 때 생성되는 실행 컨텍스트 즉, 해당 함수와 관련된 모든 내외부 환경 정보를 하나의 사전처럼 정리해 놓는 것을 말한다. 내외부 환경 정보라는 것에 키워드를 잡아 내부 정보에 관한 것을 `environmentRecord`로, 외부 정보에 관한 것을 `outerEnvironmentReference`로 나눈다. 내부 정보라면 함수 내부에 선언된 식별자 정보들을 생각하면 되겠고, 외부 정보라면 함수의 외부 함수의 lexicalEnvironment (즉, 외부 함수의 내부 정보와 외부 정보)를 생각하면 된다.

 

어떤 컨텍스트 A에서 선언된 내부함수 B의 실행 컨텍스트가 활성화된 시점에, B의 outerEnvironmentReference가 참조하는 대상인 A의 lexicalEnvironment에도 접근이 가능하다는 "스코프"의 원리에 따라서 발생하는 현상이 바로 "클로져"님이 되시겠당.

 

즉, 외부 함수 A에서는 내부 함수 B에서 선언한 변수에 접근할 수 없지만 그 반대 내부 B -> 외부 A는 가능하니까, 이 점을 활용해 B가 A에 선언된 변수를 참조하게끔 만들어 A가 실행 종료된다 한들 아직 실행 중인 B가 A의 변수 알고 있기 때문에 이를 활용한 연산이 계속 이뤄질 수 있다는 것이다. (더 어렵게 설명한 거 같긴 한데, 나중에 더 쉬운 표현이 생각나면 수정하겠음)

 

무튼, 외부 함수의 변수를 참조하는 내부 함수의 예를 끄적여본다.

const outer = () => {
  let count = 1;
  
  const inner = () => {
    count += 1;
    console.log(count);
  }
  
  return inner;
}

const inner = outer();
inner()

outer 함수가 inner를 반환한 결과,

outer 함수가 종료된 이후에도  inner 함수의 실행으로 인해 outer의 lexicalEnvironment에 선언된 count에 대한 참조가 유지되고 고로GC가 되지 않고 메모리를 잡고 있게 된다!!

 

어떤 필요에 의해 의도적으로 함수의 지역변수가 계속 메모리를 잡게 하도록 하는 함수들은 이런 클로져의 현상을 노린것임.

 

mdn에서 이런 활용 코드도 발견했는데, 클로져 개념 기반으로 다시 곱씹어 보니, 코드가 새롭게 읽히는 거 같기두..???

    const counter = (() => {
      let cnt = 0;
      
      const changeBy = (value) => {
        cnt += value;
      }
      
      return {
        value: cnt,
        increment: () => {
          changeBy(1);
        },
        decrement: () => {
          changeBy(-1);
        },
      };
    })();

    console.log(counter.value()); // 0
    counter.increment();
    counter.increment();
    console.log(counter.value); // 2
    counter.decrement();
    console.log(counter.value); // 1

 

예제를 더 많이 적어두면 좋은데, 기깔난게 생각이 안난다 ㅠ

일단 여기서 까뜨.