[JavaScript] 클로저(Closure)

이전에 React의 setInterval을 사용하면서 발생한 문제와 그 해결법에 대해 포스팅을 했었습니다. (아래 포스트 참고)

[React/TypeScript] setInterval 안에서 state가 변경되지 않을 때 (useInterval 사용법)

이 포스트에서 클로저(Closure)가 어떤 것인지에 대해 잠깐 언급했었는데요, 예시 코드를 통해 조금 더 구체적으로 다뤄보겠습니다. 아래 강의를 듣고 정리합니다. 제 정리보다 아래 강의가 더 잘 되어 있을 테니 보시는 걸 추천드립니다. 5분밖에 안 됩니다.
https://www.youtube.com/watch?v=tpl2oXQkGZs
 

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

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

위의 코드에서는 총 3개의 렉시컬 환경이 만들어집니다.
 
(1) 전역 렉시컬 환경 (add : function, add3 : function이 등록되어 있음)
(2) add 함수 내부 렉시컬 환경
(3) 익명함수 (add 함수 안에 있는거) 내부 렉시컬 환경
 
가 각각 등록됩니다.
 
이때 내부에서 찾고자 하는 변수가 없다면 외부에 있는 변수를 참조하게 되는데요, 결국 (3)은 (2)를, (2)는 (1)을 참조하게 됩니다.
 
add(3) 을 실행했을 때 add 함수가 실행되어 (2)에 x : 3이 등록되고,
add3(2) 를 실행했을 때 익명함수가 실행되어 (3)에 y : 2가 등록이 되는데 return x + y를 하려니 x를 익명함수의 렉시컬 환경에서 찾을 수가 없습니다.
 
그래서 참조하고 있는 add 함수 내부 렉시컬 환경에서 x : 3을 가져옵니다. 결국 5가 잘 출력되는 것이죠.
 
 
이것을 클로저라고 합니다. 함수와 렉시컬 환경의 조합이며, 함수가 생성될 당시의 외부 변수를 기억하고 있는 성질을 말합니다. 결론적으로 클로저의 원인은 렉시컬 환경에 변수들이 저장된다는 것, 그리고 렉시컬 환경이 상위 스코프의 렉시컬 환경을 참조한다는 것 때문이라고 할 수 있겠네요.

https://www.maeil-mail.kr/question/2

매일메일 - 기술 면접 질문 구독 서비스