이번 포스트에서는 자바스크립트의 동작원리와 밀접한 관련이 있는 개념인 실행 컨텍스트에 대해 설명해 보겠습니다. 실행 컨텍스트를 잘 이해하면 호이스팅의 개념도 자연스럽게 이해할 수 있으며, 클로저의 동작 방식도 이해하기 쉬워집니다.
실행 컨텍스트는 자바스크립트 소스 코드를 실행하기 위해 생성되는 환경입니다. 좀 더 구체적으로 말하면, 소스 코드가 실행되는데 필요한 환경을 제공하고 코드의 실행 결과를 관리하는 영역입니다. 실행 컨텍스트는 스코프 내의 식별자들을 등록 및 관리하고, 코드의 실행 흐름을 제어한다는 2가지 큰 역할을 수행합니다. 아래에서 실행 컨택스트의 구성 요소와 역할에 대해 더욱 자세히 설명하겠습니다.
실행 컨텍스트는 크게 3가지 구성 요소를 가지고 있습니다. 바로 환경 레코드(Environment Record), this 포인터, 스코프 체인(외부 렉시컬 환경에 대한 참조)입니다.
환경 레코드는 스코프 내부의 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 각각에 바인딩 된 값을 관리하는 저장소입니다. 객체처럼 키-값 형태로 관리합니다. 그리고 this 포인터는 현재 실행 컨텍스트에서 this가 가리키는 객체를 저장하는 공간입니다. 자바스크립트의 this는 중요한 개념이므로 나중에 별도의 포스트를 통해 정리할 예정입니다.
마지막으로 스코프 체인은 외부 렉시컬 환경을 참조하는 포인터입니다. 여기서 렉시컬 환경은 환경 레코드(Environment Record)와 스코프 체인 두 구성 요소를 묶은 구조로 이해하시면 됩니다. 본인 스코프의 (렉시컬 환경 내) 환경 레코드에서 원하는 변수가 검색되지 않을 때, 이 포인터를 따라 부모 스코프(정확히는 부모 스코프의 렉시컬 환경), 최종적으로는 전역 스코프까지 타고 올라가며 각각의 환경 레코드를 검색합니다. 이 노드들의 연결이 스코프 체인을 형성하며, 이 체인을 타고 올라가면서 식별자 해석이 이루어집니다.
실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나눌 수 있습니다. (eval 실행 컨텍스트와 모듈 실행 컨텍스트도 존재하긴 합니다. 참고)
전역 실행 컨텍스트는 자바스크립트가 처음 실행될 때 생성되는 컨텍스트입니다. 이 전역 컨텍스트는 프로그램이 종료될 때까지 유지되며, 전역에 선언된 변수나 함수가 전역 컨텍스트의 환경 레코드에 모두 저장됩니다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능합니다. 기본적으로 자바스크립트는 싱글 스레드이기 때문에, 전역 실행 컨텍스트는 1개만 존재합니다.
함수 실행 컨텍스트는 함수가 호출될 때마다 생성 되는 컨텍스트를 의미합니다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이 컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효합니다. 함수가 종료되면 그 실행 컨텍스트도 함께 사라집니다.
실행 컨텍스트는 스코프 내의 식별자들을 등록 및 관리하고 코드의 실행 흐름을 제어한다고 위에서 언급했었는데, 식별자 등록 및 관리는 렉시컬 환경 안에서 이루어진다는 것을 상단의 정리된 내용을 통해 알 수 있습니다. 그렇다면 코드의 실행 흐름은 어떻게 제어하는 것일까요? 바로 실행 컨텍스트 스택을 이용하여 관리하는 것입니다.
실행 컨텍스트 스택은 사실 자바스크립트의 콜 스택과 같은 것을 가리킵니다. 다만 실행 컨텍스트 스택은 추상화된 개념이고, 콜 스택은 실제 메모리 구조로 구현된 것입니다. 즉 이 둘은 동일한 스택입니다. 따라서 실행 컨텍스트 스택의 동작 방식도 콜 스택 동작 방식과 동일합니다.
소스 코드는 평가와 실행이라는 두 과정을 거칩니다. 평가 과정은 코드를 실행할 준비를 하는 단계로 실행 컨텍스트를 생성하고 스코프 내 식별자의 키를 렉시컬 환경의 환경 레코드에 미리 등록합니다. 바로 이 과정이 호이스팅인 것입니다. 평가가 끝나게 되면 소스 코드를 순차적으로 실행시키는 실행 과정이 진행되는데, 이 때 호이스팅을 통해 미리 등록한 변수나 함수가 실제 스코프에서 검색되어 각각 할당됩니다.
실행 컨텍스트 스택에는 함수가 실행되어 생성된 실행 컨텍스트가 순차적으로 쌓입니다. 맨 처음에는 전역 실행 컨텍스트가 쌓이고, 내부 함수가 실행될 때마다 그 위에 함수 실행 컨텍스트가 스택에 쌓입니다. 각각의 함수가 실행될 때는 위에서 언급한 평가와 실행 과정이 매 함수마다 진행된다는 점을 기억해주세요. 그리고 함수의 실행이 끝나면 위에서부터 순차적으로 실행 컨텍스트가 제거됩니다. 이 과정은 마치 재귀 함수의 동작 방식과 비슷하게 느껴지는 부분입니다. 이러한 방식을 통해 실행 컨텍스트는 코드의 실행 흐름을 제어하는 역할을 수행하는 것입니다.
여기까지 자바스크립트의 실행 컨텍스트라는 개념에 대해 정리해 보았습니다. 개인적으로 공부하기 많이 어려웠던 개념이었는데, 다행이도 ChatGPT와 모던 자바스크립트 튜토리얼 책을 통해 잘 이해하고 이렇게 글로 내용을 정리할 수 있어서 뿌듯한 기분입니다.
'◼ FrontEnd > JavaScript' 카테고리의 다른 글
| [JavaScript] 클로저에 대하여 (0) | 2025.06.23 |
|---|---|
| [JavaScript] 자바스크립트는 일급 함수를 지원하는 언어이다 (0) | 2024.09.03 |
| [JavaScript] forEach문에서 return이나 break를 쓰면 안된다 (3) | 2023.10.27 |