Closure: 외부 변수를 기억하는 함수

2023. 7. 14. 07:11JavaScript

728x90
반응형

Closure

클로저는 함수가 선언된 렉시컬 환경을 '기억'하여, 해당 함수가 선언된 범위 바깥에서 호출되더라도 그 환경에 있는 변수를 접근하고 조작할 수 있게 하는 프로그래밍 패턴이다.

 

 

함수는 보통 호출되고 나면 실행이 끝나고, 그 안에서 선언한 모든 변수는 메모리에서 해제된다.

이렇게 되면 일반적으로 해당 함수의 변수에는 접근할 수 없게 된다.

 

그런데, 클로저가 있는 경우에는 얘기가 달라진다.

클로저가 있으면 외부 함수가 종료되어도, 내부 함수가 외부 함수의 지역 변수에 계속해서 접근할 수 있다.

(외부 함수의 변수를 기억하고 계속 사용할 수 있게 된다.)

 

우선 함수 내부에 함수가 있는 유형을 먼저 만들어보자.

 

외부함수 aaa의 지역변수에 내부함수인 bbb가 접근할 수 있다.

apple이 외부함수에 있기 때문에 스코프체인에 의해서 접근이 가능하므로 "이건 사과예요."가 올바르게 출력된다.

 

외부에서 매개변수로 받아와도 실행 결과는 동일하다.

 

여기까지는 충분히 예측할 수 있는 결과이다.

 

이번에는 외부 함수가 종료되는 상황을 만들어보자.

이 예제에서는 외부 함수가 종료되었음에도 불구하고,
coutner()로 호출되는 InnerFunction에서 외부 함수의 지역 변수인 count를 기억하고 있는 것을 볼 수 있다.

이러한 특성이 바로 클로저 ⭐️

 


 

개발자 도구 > Sources에서도 Closure를 확인해볼 수 있다!

 

1. Call Stack

  • aaa()를 실행하는 부분에 break point를 걸어주고 새로고침을 하면
    aaa()가 실행되기 직전에 멈춘다.
  • call stack: 실행하는 함수들이 stack 형태로 쌓인다. (마지막에 들어온 것이 먼저 실행되어서 빠져나간다.)

 

2. 호이스팅

  • aaa 함수가 실행되기 시작하면, apple, bbb, qqq가 할당은 되지 않았지만 선언된 것을 볼 수 있다.
    (호이스팅이 이루어진 것으로, 할당은 런타임에 이루어진다.)

 

3. Closure

  • bbb 함수가 실행되면 생기는 Closure는,
    실행 컨텍스트에서 사용되고 있는 내부 함수bbb의 외부함수aaa의 지역변수이다.
  • 스코프체인 때문에 bbb 안에서 apple이 사용될 수 있는 것이다.
728x90
반응형

'JavaScript' 카테고리의 다른 글

Debouncing & Throttling  (0) 2023.02.09
node.js 환경에서 TypeScript 사용하기  (0) 2023.02.02
SOP와 CORS, CORS 이슈가 발생하는 이유  (0) 2023.02.02