Closure: 외부 변수를 기억하는 함수
2023. 7. 14. 07:11ㆍJavaScript
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 |