실행 컨텍스트에 대한 이해가 없으면 클로저의 개념에 대한 이해가 어려울 수 있다. 만약 실행 컨텍스트에 대한 개념이 잡혀있지 않다면 실행 컨텍스트에 대한 공부를 먼저 진행하는 것을 권한다.
렉시컬 스코프 (Lexical Scope, 어휘적 범위)
자바스크립트는 렉시컬 스코프라는 변수 유효범위를 따른다. 렉시컬 스코프에서는 함수 혹은 변수의 유효범위가 선언된 위치를 기준으로 결정된다. 이와 반대로 호출된 시점을 기준으로 유효범위가 결정되는 방식을 Dynamic Scope라고 부른다. 우리가 자주 사용하는 C, C++, Java, Javascript 등의 언어들은 모두 Lexical Scope 방식을 따르며 Dynamic Scope를 따르는 언어들은 Perl, Bash Shell, APL과 같은 들어보기도 힘든 오래된 언어들이다. Lexical Scope 내에서도 구체적인 범위에 따라 차이가 존재한다. 예를 들어 C계열의 언어들은 Block Scope를 따르며 Javascript는 Function Scope를 따른다.
클로저 (Closure)
클로저는 함수와 함수가 선언되었을 때의 환경인 렉시컬 스코프의 조합이다. 클로저를 통해 내부 함수가 선언될 때의 외부 함수 Context에 접근할 수 있다. (이것이 가능한 이유는 실행 컨텍스트의 스코프 체인이 존재하기 때문이다.)
위의 예시에서 outerFunction이 이미 종료되었음에도 불구하고 printFunction은 자신이 선언되었던 순간의 환경을 기억하여 outerFunction의 변수인 name에 접근할 수 있다.
클로저의 기능을 통해 제공되는 장점들은 다음과 같다.
(1) 현재 상태를 기억할 수 있으며 그것이 변경되어도 최신 상태를 유지할 수 있다.
(2) 전역변수의 사용을 억제할 수 있다. (전역 변수는 누구나 접근 가능하다는 점에서 프로그램의 오류를 불러일으키기 쉽다.)
(3) 정보 은닉 : 클로저를 통해 클래스 기반 언어의 private 메소드를 흉내낼 수 있다.
'프론트엔드 기본개념 복습 > Javascript' 카테고리의 다른 글
[Javascript] 이벤트 위임 (Event Delegation) (0) | 2022.02.25 |
---|---|
[Javascript] 이벤트 버블링, 이벤트 캡쳐링 (Event Bubbling, Event Capturing) (0) | 2022.02.24 |
[Javascript] this (0) | 2022.02.24 |
[Javascript] 실행 컨텍스트 (Execution Context) (0) | 2022.02.24 |
[Javascript] 이벤트 루프 (Event Loop) (0) | 2022.02.23 |