Closure - javascript

javascript의 closure는 react hook 등 여러 곳에 사용되며 중요한 개념 중 하나이다.
closure에 대해 공부한 개념들을 정리해보고자 작성해보려한다.

• javascript에는 함수 레벨 스코프 / 블록 레벨 스코프가 있으며 es6(const, let)을 통해 블록 레벨 스코프도 가능하다.
• javascript는 lexical scope, 동적 스코프로 함수가 정의되는 시점에 상위 스코프가 결정된다.
• javascript에서 함수가 생성될 때 내부 슬롯에 상위 스코프에 대한 참조를 저장한다.

3번째 내용에 대해 관련된 내용들이다.

함수 호출의 과정

• 함수 호출 > 실행 컨텍스트 생성 > 렉시컬 환경 생성 > 실행 컨텍스트 제거

실행 컨텍스트란?

실행할 코드에 제공할 환경 정보를 모아놓은 객체

렉시컬 환경이란?

포함하는 식별자, 식별자에 바인딩 된 값, 상위 렉시컬 환경에 대한 참조

Closure

실행 컨텍스트 스택에서 특정 함수가 제거되더라도 전역에서 선언한 변수가 반환한 중첩 함수를 참조하고 있고 
이것의 내부 슬롯이 상위 스코프의 남아있는 렉시컬 환경을 참조하고 있기 때문에 가비지 컬렉션의 대상이 되지 않고
지역변수를 사용할 수 있다.

클로져에 의해 참조된 변수를 자유 변수라고 한다.

예제 코드) 

const x = 1;

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

closure의 용도

1. 하나의 state가 의도치 않게 변경되지 않도록 state를 은닉할 수 있도록 해준다. ( 외부함수의 지역 변수를 은닉화 해준다. )
2. 특정 함수에게만 state 변경을 허용하기 위해 사용된다. ( 지역변수 값을 기억하여 계속 접근할 수 있게 해준다. )

이 다음으로는 closure가 react 등 다양한 곳에서 어떻게 활용되고 있는지 알아보고 정리해 볼 것이다.