TIL.클로저(Closure)

정의 🙄

함수와 함수가 선언된 어휘적 환경의 조합이다(MDN)

그래..그렇구나..그런거구나..

1. 어휘적 환경 (Lexical Environment)

코드로 보자.

let one;
one = 1;

function addOne(num) {
  console.log(one + num);
}

addOne(5);

1. 첫번째 어휘적 환경이다. (전역 Lexical Env)

   1. 변수 one 이 선언되었다. (초기화 전이라 사용 못함, 초기화 이후 사용 가능)
   2. 함수 addOne 이 선언되었다. (함수는 선언+초기화+할당을 동시에 하므로 사용은 가능하다)

2. 새로운 어휘적 환경이 생겼다. (내부 Lexical Env)

   addOne 함수를 실행하면서 넘긴 매개변수 num = 5이 저장되었다.

두 어휘적 환경은 관계!

내부 Lexical 환경은 외부 > 외부 > ... > 전역 Lexical 환경에 이르기까지 참조한다.

다른 코드를 보자.

function makeAdder (x) {
  return function(y) {
    return x + y;
  }
}

const add3 = makeAdder(3);
console.log(add3(2));

1. 전역 Lexical 환경에는 아래 2가지가 저장된다.

   1. makeAdder
   2. add3

2. add3은 makeAdder를 호출하고 있기 때문에 makeAdder Lexical 환경이 생겨난다.

   x = 3

3. console.log를 통해 익명함수 Lexical 환경이 생겨난다.

   y = 2

정리하자.

makeAdder 함수 내에 있던 익명함수는 자신의 매개변수 y를 지역변수로 가지고, 상위함수인 makeAdder의 매개변수 x에도 접근이 가능하다.

const add10 = makeAdder(10);
console.log(add10(3)); // 13 - add10함수가 생성된 이후에도 10이라는 외부 지역변수에 접근이 계속 된다.

이것이 클로저이다.

1. 함수와 렉시컬 환경의 조합
2. 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근 가능
3. add10이 외부 변수 10을 참조하고 있는지 아무도 모른다. 은닉화가 이뤄졌다.