[JavaScript] 실행 컨텍스트 (execution context)

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 어떤 실행 컨텍스트를 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행합니다.

실행 컨텍스트를 살펴보기 앞서 스택(stack)과 큐(queue)를 살펴보자

-스택 (stack)

스택은 출입구가 하나뿐인 우물 같은 데이터 구조입니다. 비어있는 스택에 순서대로 a,b,c,d를 저장했다면, 꺼낼 때는 반대로 d,c,b,a 순서대로 꺼낼 수 밖에 없습니다.

-큐 (queue)

큐는 양쪽이 모두 열려있는 파이르를 떠올리면 됩니다. 종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 있으나 보통은 한쪽은 입력만, 다른 한쪽은 출력만을 담당하는 구조를 말합니다.
a,b,c,d 로 데이터를 저장했다면 꺼낼 때도 역시 a,b,c,d

동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역공간, eval()함수, 함수 등이 있습니다.
자동으로 생성되는 전역공간과, 악마로 취급받는 eval를 제외하면 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것뿐입니다.

var a=1;
function outer(){
  function inner(){
    console.log(a)
    var a=3;
  }
  inner()
  console.log(a)
}
outer()
console.log(a)

1. 전역 컨텍스트가 콜 스택에 담깁니다.
2. 코드들을 순차적으로 진행하다가 outer 함수를 호출하면 자바스크립트 엔진은 outer에 대한 환경 정보를 수집해서 실행 컨텍스트를 생성한 후! 콜스택에 담습니다.
3. 콜스택 맨 위에 outer 실행 컨텍스트가 놓인 상태이므로 전역 컨텍스트와 관련된 코드 실행 일시중단!
4. outer 실행 컨텍스트와 관련된 코드, 즉 outer ㅎ마수 내부의 코드들을 순차로 실행합니다.
5. ...inner도 같은 순서 inner함수 출력 하고 나면 콜스택에서 제거
6. outer실행후 콜스택에서 제거

⭐️ 자바스크립트 엔진은 이렇게 해당 컨텍스트에 관련된 코드(콜스택 최상단)들을 실행하는 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장합니다. 이 객체는 자바스크립트 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인할 수는 업습니다.

여기에 담기는 정보들은 다음과 같습니다.
1️⃣ Variable Environment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보, 선언 시점의 Lexical Environment의 스냅샨으로, 변경 사항은 반영되지 않음

2️⃣ Lexical Environment : 처음에는 Variable Environment와 같지만 변경 사항이 실시간으로 반영됨.

3️⃣ ThisBinding : this 식별자가 바라봐야 할 대상 객체.