[TokTokHan.dev]Execution Context(실행 컨텍스트)

자바스크립트의 실행 컨텍스트를 사내 스터디 발표 기반으로 정리한 글이다. 콜 스택을 이해하기 위해 스택과 큐부터 짚고, 실행 컨텍스트에 담기는 정보 셋을 나열한 뒤 예제 코드의 출력이 왜 그렇게 나오는지 스코프 체인으로 설명한다. TypeScript도 자바스크립트를 상속하므로 기본 개념이 필요하다는 전제로 시작한다.

핵심 포인트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보를 모아놓은 객체다.
컨텍스트는 콜 스택에 쌓였다가 스택 방식대로 가장 위의 것부터 실행된다.
스택은 나중에 들어간 것이 먼저 나오고 큐는 먼저 들어간 것이 먼저 나온다.
컨텍스트에는 변수 환경과 렉시컬 환경, this 바인딩 정보가 담긴다.
변수 환경은 선언 시점의 스냅샷이라 변경이 반영되지 않고 렉시컬 환경은 실시간으로 반영된다.
스코프 체인에서 가장 먼저 발견된 식별자에만 접근되므로 상위의 같은 이름 변수는 가려진다.

상세 정리

배경: 프론트엔드 팀이 매주 자바스크립트 기초 스터디를 하며 한 사람이 한 파트를 맡아 발표하고 의견을 나누는 형태로 진행한다.
앞선 회차: 첫 시간에는 데이터와 불변성을 다뤘고 이번이 실행 컨텍스트 차례다.
전제: 팀이 TypeScript 기반 리액트를 쓰지만 그것이 자바스크립트의 슈퍼셋인 만큼 기본 개념과 동작 원리를 그대로 물려받는다.
스택의 특징: 차곡차곡 쌓아 올리는 구조로 나중에 넣은 것이 먼저 나오며 되돌리기 동작과 유사하다.
큐의 특징: 한쪽 끝에서 넣고 반대쪽에서 빼며 줄 서서 기다리거나 번호표를 뽑는 방식과 같다.
실행 방식: 실행 컨텍스트는 환경 정보를 모아 구성된 뒤 콜 스택에 쌓이고 스택 맨 위부터 순차 실행된다.
저장되는 정보: 특정 컨텍스트가 활성화될 때 관련 환경 정보를 수집해 활성 객체에 저장하며, 매개변수와 사용자가 정의한 변수, 객체가 여기 들어간다.
접근 범위: 이 객체는 엔진 내부에서 접근하는 것이며 사용자가 직접 다루는 대상이 아니다.
변수 환경: 현재 컨텍스트의 식별자 정보와 외부 환경 정보를 담으며 선언 시점의 렉시컬 환경 스냅샷이라 변경이 반영되지 않는다.
렉시컬 환경: 최초에는 변수 환경과 같지만 변경 사항이 실시간으로 반영된다.
this 바인딩: this 식별자가 바라볼 대상 객체 정보를 갖는다.
예제 구성: 전역에 변수를 하나 두고, 바깥 함수 안에 안쪽 함수를 두며 안쪽 함수에서 같은 이름의 변수를 선언한 뒤 출력한다.
스코프 체인: 현재 컨텍스트의 유효 범위를 나타내는 정보로, 여러 스코프에 같은 식별자가 있으면 체인상 가장 먼저 발견된 것에만 접근된다.
예제의 답: 안쪽 함수에서 출력한 값이 undefined인 이유는 그 스코프의 렉시컬 환경에 이미 같은 이름의 식별자가 존재해 체인 검색이 더 진행되지 않기 때문이다.
용어 정리: 이렇게 상위 스코프의 같은 이름 변수에 접근할 수 없게 되는 것을 변수 은닉화라고 부른다.
다루지 않은 것: 실행 컨텍스트에 집중하기 위해 비동기 처리와 이벤트 루프는 제외했다고 밝힌다.