Execution Context & Call Stack

Execution Context

실행 컨텍스트는 추상적인 개념으로 JavaScript 코드가 실행되는 환경으로 정의할 수 있다. 지역 변수나 함수에 전달된 인자와 같이 실행되는 코드를 위해 필요한 모든 정보를 저장하는 상자 같은 것이라고 할 수 있다. 따라서, JavaScript 코드는 항상 실행 컨텍스트 내에서 실행된다. 어떤 프로젝트에서든 크기에 상관없이 전역 실행 컨텍스트는 항상 하나만 있다. 전역 실행 컨텍스트는 항상 기본 컨텍스트로 존재하며 최상위 코드(즉, 어느 함수에도 속하는 않는 코드)가 실행되는 곳이다. 전역 실행 컨텍스트가 생성되고 나면 이 안에서 최상위 코드가 실행된다. 실행은 단순히 컴퓨터 CPU가 받은 기계 코드를 처리하는 것뿐이다. 최상위 코드가 완료되면 함수가 실행되기 시작한다. 각 함수 호출마다 해당 함수를 실행하는 데 필요한 모든 정보를 포함하는 새로운 실행 컨텍스트가 생성된다. 물론 메서드도 마찬가지인데 단순히 객체에 연결된 함수이기 때문이다. 모든 실행 컨텍스트는 호출 스택을 구성한다. 모든 함수의 실행이 끝나면 엔진은 기본적으로 콜백 함수가 도착하기를 기다리고 실행한다.

실행 컨텍스트는 변수 환경, 스코프 체인, this 예약어로 구성된다. 하나씩 살펴본다. 모든 실행 컨텍스트 내에 있는 첫 번째 요소는 변수 환경으로 모든 변수 선언(let, var, const), 함수 그리고 arguments 객체가 저장된다. arguments 객체는 이름대로 현재 실행 컨텍스트에 속한 함수로 전달된 모든 인자가 포함된다. 왜냐하면 각 함수는 호출될 때 고유한 실행 컨텍스트를 얻기 때문이다. 따라서, 기본적으로 함수 내에서 어떤 방식으로든 선언된 모든 변수는 해당 함수의 변수 환경에 속한다. 그러나 함수는 함수 외부의 변수에도 접근할 수 있는데 이는 스코프 체인 때문이다. 스코프 체인은 기본적으로 현재 함수 외부에 위치한 변수에 대한 참조로 구성되며 스코프 체인을 추적하기 위해 각 실행 컨텍스트에 저장된다. 마지막으로, 각 실행 컨텍스트는 this 예약어라는 특별한 변수를 가진다. 변수 환경, 스코프 체인 그리고 this 예약어는 실행 바로 전인 생성 단계(creation phase)에서 생성된다. 유의해야 점은 화살표 함수에 속하는 실행 컨텍스트는 자체적인 arguments 객체나 this 예약어를 가지지 않는다. 즉, 기본적으로 화살표 함수는 arguments 객체와 this 예약어를 보유하지 않으며 화살표 함수는 가장 가까운 일반 함수 부모로부터 arguments 객체와 this 예약어를 사용할 수 있다.

Call Stack

호출 스택은 기본적으로 실행 컨텍스트가 서로 위에 쌓이는 곳으로 프로그램 실행의 현재 위치를 추적한다. 따라서, 호출 스택의 맨 위에 있는 실행 컨텍스트는 현재 실행 중이고 실행이 완료되면 호출 스택에서 제거되고 실행은 이전 실행 컨텍스트로 돌아간다.

update: 2023-09-01