📚 자바스크립트의 실행 컨텍스트

thumb_hyeok·2022년 3월 1일

JavaScript execution context hoisting

🟡 JavaScript

목록 보기

3/15

🤔 실행 컨텍스트란 무엇일까?

실행 컨텍스트

자바스크립트 엔진은 코드를 실행하기 전에 코드를 평가하는 과정을 거친다. 그 후에 선언문을 제외한 소스코드가 실행된다. 이 때, 코드를 평가하는 과정에서 소스코드를 실행할 때 제공할 환경 정보를 모아놓은 객체를 생성하는데 이 객체가 실행 컨텍스트이다.

소스코드의 타입

소스코드는 ECMAScript 사양에 따라 4가지 타입으로 구분된다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. (코어 자바스크립트는 ES6부터는 블록에 의해서도 실행 컨텍스트가 생성된다고 한다. 그러나 모던 자바스크립트 Deep Dive는 블록에 의해서는 새로운 LexicalEnvironment만 생성되어 코드 블록이 실행되는 동안 교체한다고 한다. 어느 쪽이 맞는지 모르겠다. ()안의 내용은 아직 이해가 안 되어도 상관없다. 나중에 글을 다 읽고 한 번 올라와서 살펴만 봐라.)

전역 코드, 함수 코드, eval 코드, 모듈 코드로 구분된다.

이 글에서는 전역 코드와 함수 코드로 생성되는 실행 컨텍스트만 다루도록 하겠다.

전역 코드는 전역 실행 컨텍스트를 생성하고, 함수 코드는 함수 실행 컨텍스트를 생성한다. 일단 여기까지만 알고, 둘이 뭐가 다른지는 아래에서 살펴보도록 하자.

📚 Call stack (실행 컨텍스트 스택)

생성된 실행 컨텍스트는 콜 스택을 통해서 관리된다. 맨 위에서 설명한 자바스크립트 엔진에 의해 소스코드는 평가(Creation Phase), 실행(Execution Phase) 두 단계로 나뉘어 처리된다고 했는데 이에 대한 흐름에 집중해 아래 코드를 살펴보면 좋을 것 같다. 그럼 아래의 예시 코드의 동작을 보면서 실행 컨텍스트가 어떻게 돌아가는건지 좀 더 찍먹해보자.

//---- 1 
const a = 1;

function foo() {
  const b = 2;
  
  console.log(b); //---- 3
}

foo(); //---- 2
console.log(a); //---- 4

주석을 달아 놓은 순서대로 코드 진행을 설명하도록 하겠다.

전역 실행 컨텍스트 생성
전역 코드를 실행하기에 앞서 먼저 전역 코드 평가 과정을 거치고 전역 실행 컨텍스트를 생성한다. 생성한 전역 컨텍스트는 콜 스택에 쌓인다. 콜 스택 맨 위에 쌓여있는 실행 컨텍스트는 전역 실행 컨텍스트이기 때문에 전역 코드가 실행된다.
foo 함수 실행 컨텍스트 생성
전역 코드를 실행하다가 foo();를 만나면 자바스크립트 엔진은 foo 함수 코드를 평가해 foo 함수 실행 컨텍스트를 생성한다. 생성한 foo 함수 실행 컨텍스트는 콜 스택에 쌓인다. 이제 콜 스택 맨 위에 쌓여있는 실행 컨텍스트는 전역 실행 컨텍스트가 아니라 foo 함수 실행 컨텍스트가 되었다. 전역 코드의 실행은 중지되고, foo 함수 내부 코드가 실행된다.
foo 함수 실행 종료
console.log(b)를 실행하고 나면 foo 함수의 실행이 종료되면서 foo 함수 실행 컨텍스트가 콜 스택에서 제거된다. 이제 콜 스택 맨 위에 쌓여있는 실행 컨텍스트는 전역 실행 컨텍스트이기 때문에 실행을 중단했던 foo(); 줄의 다음 줄부터 이어서 실행된다.
전역 코드 실행 종료
console.log(a)를 실행하고 나면 전역 코드의 실행이 종료되면서 전역 실행 컨텍스트가 콜 스택에서 제거된다. 콜 스택에는 아무것도 남지 않은 상태로 프로그램은 종료된다.

이처럼 콜 스택은 코드의 실행 순서를 관리한다. 소스코드가 평가되면 실행 컨텍스트가 생성되고 콜 스택의 최상위에 쌓인다. 콜 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트이다. 콜 스택에 최상위에 존재하는 실행 컨텍스트를 실행 중인 실행 컨텍스트(running excution context)라고 부른다.

🗃️ 실행 컨텍스트의 구성요소

위에서는 실행 컨텍스트가 코드를 평가하는 과정에서 소스코드를 실행할 때 제공할 환경 정보를 모아놓은 객체 라고만 얘기해놓고 어떤 환경 정보를 모아놓은건지 하나도 설명하지 않았다. 이제 실행 컨텍스트의 구성요소를 살펴보면서 살펴보자.

실행 컨텍스트는 VariableEnvironment, LexicalEnvironment 컴포넌트로 구성된다. (사실은 이것보다 더 복잡한 구조를 가지고 있다..) 구조를 살펴보자면 아래와 같다.

VariableEnvironment (LexivalEnvironment와 구조 같음)

LexicalEnvironment

EnvironmentRecord

ObjectEnvironmentRecord (전역 실행 컨텍스트만 존재함)

DeclarativeEnvironmentRecord (전역 실행 컨텍스트만 존재함)

[[ThisValue]] (전역 실행 컨텍스트는 [[GlobalThisValue]])

OuterLexicalEnvironmentReference

각각이 실행 컨텍스트 객체가 생성될 때 어떤 환경 정보를 모아 놓는지, 무슨 역할을 하는지는 아래에서 순서대로 살펴보도록 하자.

🗂️ VariableEnvironment

VariableEnvironment는 현재 컨텍스트 내부의 식별자들에 대한 정보, 상위 스코프에 대한 참조를 기록하는 자료구조이다. 실행 컨텍스트가 생성될 때, VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같지만, 최초 실행 시의 스냅샷을 유지한다는 점이 다르다. VariableEnvironment가 생성되고 이를 그대로 복사해 LexicalEnvironment를 만들고 이후에는 주로 LexicalEnvironment를 활용하게 된다.
(이는 코어 자바스크립트의 설명인데, 딥 다이브와는 다른 부분이 꽤 있다. 추가로 공부해서 알아내는 내용이 있으면 더 적도록 하겠다)

그래서VariableEnvironment에 대한 설명은 여기까지만 하고 자세한 사항은 처음에는 같지만 코드 진행에 따라 달라지게 될 LexicalEnvironment에서 다루도록 하겠다.
그리고 이 글에서는 둘을 구분하지 않고 LexicalEnvironment으로 통일해 간략하게 설명하겠다.

🗂️🖨️ LexicalEnvironment

LexicalEnvironment는 VariableEnvironment와 마찬가지로 현재 컨텍스트 내부의 식별자들에 대한 정보, 상위 스코프에 대한 참조를 기록하는 자료구조이다. LexicalEnvironment는 키와 값을 갖는 객체 형태의 스코프를 생성하여 식별자를 키로 등록하고 식별자에 바인딩된 값을 관리한다. 콜 스택이 코드의 실행 순서를 관리한다면 LexicalEnvironment는 스코프와 식별자를 관리한다.

EnvironmentRecord

LexicalEnvironment의 EnvironmentRecord 컴포넌트에는 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다. 함수 실행 컨텍스트의 경우 함수 몸체 내부에서 선언된 변수, 함수, arguments객체, 매개변수가 등록되어 관리된다. EnvironmentRecord 내부 슬롯 [[ThisValue]]에는 this가 바인딩된다. (this에 대해서는 다음에 알아보도록 하겠다.)

전역 실행 컨텍스트는 조금 다르다. 전역 실행 컨텍스트의 EnvironmentRecord는 전역 변수를 관리하는 전역 스코프, 전역 객체의 빌트인 전역 프로퍼티와 빌트인 전역함수, 표준 빌트인 객체를 제공한다. var로 선언한 전역 변수는 전역 객체의 프로퍼티가 되지만 let,const로 선언한 전역 변수는 그렇지 않다.
이 둘을 구분해 관리하기 위해 전역 실행 컨텍스트의 EnvironmentRecord는
ObjectEnvironmentRecord와 DeclarativeEnvironmentRecord로 구성되어있다.

ObjectEnvironmentRecord는 BindingObject라고 부르는 객체와 연결된다. 이는 전역 코드를 평가하기 전에 생성된 전역 객체이다. 전역 코드 평가 과정에서 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수는 전역 객체의 프로퍼티와 메서드가 된다.

DeclarativeEnvironmentRecord는 let, const 키워드로 선언한 전역 변수와 let, const 키워드로 선언한 전역 변수에 할당한 함수 표현식을 등록해 관리한다.

마지막으로 EnvironmentRecord의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩된다.

OuterEnvironmentReference

OuterEnvironmentReference는 함수 정의가 평가된 시점에 실행 중인 실행 컨텍스트의 LexicalEnvironment, 즉 상위 스코프를 가리킨다. 이를 통해 저번 글에서 알아봤던 스코프 체인이 단방향 연결 리스트로 구현된다. 혹시 스코프 체인이나, 렉시컬 스코프에 대해 정확히 모르겠다면 이전 글을 읽고 오는 것을 추천한다.

➡️ 자바스크립트의 스코프

🎈 EnvironmentRecord 와 호이스팅

호이스팅이란, 자바스크립트 엔진에 의해 변수의 선언과 초기화 단계가 분리되어 진행될 때, 변수의 선언 단계때 변수의 선언문이 실행 컨텍스트의 최상단으로 끌어올려진 것처럼 진행되는 현상을 말한다. (실제로 물리적으로 변수의 선언문이 실행 컨텍스트의 최상단으로 끌어 올려지지 않는다.)이는 변수 뿐만 아니라 함수에도 적용된다.

자바스크립트가 소스코드를 평가할 때, 소스코드의 선언문만 실행해 식별자들이 위에서부터 아래의 순서대로 LexicalEnvironment의 EnvironmentRecord에 키(key)로 등록된다. 이렇게 실행 컨텍스트가 만들어진 시점까지는 값이 할당되어있지않다. (var키워드로 만든 변수는 선언, 초기화단계가 한 번에 실행되어 undefined로 암묵적으로 초기화된다. 이 내용이 새롭게 느껴진다면 아래 글을 읽고 와라.)

➡️ 자바스크립트의 변수와 데이터 타입

그러고나서 소스코드 평가가 완료되고 실행 컨텍스트 객체가 만들어져 콜 스택에 쌓이면 선언문을 제외한 소스코드의 실행이 시작되면서 식별자에 값을 할당하는 코드를 만나면 LexicalEnvironment의 EnvironmentRecord에 키(key)로 저장된 식별자에 값(value)이 할당된다.

변수 호이스팅

위에서 살펴본 변수 호이스팅이 일어나는 과정을 코드로 살펴보자. 변수 호이스팅은 var키워드로 선언한 변수와 let, const로 선언한 변수가 다르게 나타나므로 따로 따로 살펴보겠다.

console.log(num); // undefined

var num = 10; 

console.log(num); // 10

전역 객체 생성
나중에 다루게 되겠지만 소스코드가 평가되기 이전에 전역객체가 실행된다.
소스코드 평가
소스코드 평가 과정에서 선언문만 먼저 실행한다. 이 때 전역 실행 컨텍스트의 LexicalEnvironment의 EnvironmentRecord의 DeclarativeEnvironmentRecord에 식별자 num이 키로 등록된다. var 키워드로 생성되었기 때문에 선언과 초기화가 동시에 이루어져 값으로 undefined가 할당된다. (this바인딩과 OuterEnvironmentReference 설정은 호이스팅과 연관이 없어 생략했다.)
첫번째 'console.log'
소스코드 평가가 끝나면 선언문을 제외한 소스코드가 실행된다. 첫번째줄의 console.log(num)를 만나면 (사실 console 식별자도 검색하고 이러저러한 과정을 더 거치지만 생략하겠다.) num식별자를 현재 실행 컨텍스트의 (위 코드에서는 전역 실행 컨텍스트) LexicalEnvironment에서 등록되어 있는지 찾는다. 지금은 등록되어있기 때문에 num의 값인 undefined를 출력한다.
var num = 10;
선언문 부분을 제외하고 'num = 10'만 실행해 등록된 num의 값을 10으로 재할당한다.
두번째 'console.log'
또 다시 num식별자를 현재 실행 컨텍스트의 (위 코드에서는 전역 실행 컨텍스트)의 LexicalEnvironment에서 등록되어 있는지 찾는다. 역시나 등록되어있기 때문에 num의 값인 10을 출력한다.

이러한 과정을 겪어 변수 호이스팅이라는 현상이 일어난다. let, const 키워드로 선언한 변수는 어떻게 var 키워드로 선언한 변수와 다른지 살펴보자.

console.log(num); // Reference Error

var num = 10; 

console.log(num); // 10

let이나 const로 선언한 변수는 var키워드와 달리 "선언"과 "초기화"단계가 분리되어 일어나기 때문에 런타임에 실행 흐름이 변수 선언문에 도달하기 전까지 아무 값도 변수가 담겨있지 않은데, 이 때 변수에 접근할 수 없기 때문에 변수 선언문에 도달하기 전까지를 일시적 사각지대(Temporal Dead Zone) TDZ라고 부른다.

이 때문에 첫번째 console.log가 실행될 때 전역 실행 컨텍스트에 등록된 num에는 아직 값이 없기 때문에 num은 일시적 사각지대에 빠져 있는 상태이다. 그래서 Reference Error가 발생한다.

즉, var 키워드로 변수를 만들던 let, const 키워드로 변수를 만들던 호이스팅은 일어나지만 var 키워드로 만든 변수는 선언문에 도달하기 전에 변수를 참조할 수 있지만, let, const 키워드로 만든 변수는 선언문에 도달하기 전에 변수를 참조할 수 없다.

함수 호이스팅

함수 호이스팅은 "함수 선언문" 방식으로 정의한 함수와 "함수 표현식" 방식으로 정의한 함수가 다르게 일어나는데, 먼저 변수에 함수를 담아서 함수를 선언하는 함수 표현식의 호이스팅은 위에서 살펴본 변수 호이스팅과 똑같이 발생한다.

함수 선언문으로 선언한 함수는 함수 전체가 호이스팅되기 때문에 런타임에 실행 흐름이 함수의 선언의 이전에도 함수를 참조할 수 있다. 그러나 이는 많은 혼란을 발생시킬 수 있기 때문에 함수 표현식 방식으로 함수를 선언하는 것이 좋다.

함수 선언문 방식은 런타임 이전, 함수 정의가 평가되는 시점에 함수 객체가 생성된다.
함수 표현식 방식은 런타임 도중, 변수에 함수 정의가 평가되어 할당되는 시점에 함수 객체가 생성된다.

🥷 OuterEnvironmentReference와 변수 은닉화

자바스크립트의 스코프에서 살펴봤듯이 스코프 체인은 하위 스코프에서 상위 스코프로 단방향으로만 이동할 수 있다고 했다. OuterEnvironmentReference를 통해 단방향 연결리스트로 구현된 스코프 체인을 예시코드로 살펴보면서 변수 은닉화에 대해서도 살펴보자.

let name = 'Harry';

function inner() {
  let name = 'Hyeok';
  
  console.log(name);
}

inner();
console.log(name);

전역 코드 평가
평가 이전에 전역 객체가 생성되고, 이후 전역 실행 컨텍스트가 생성된다. 첫 줄에서 변수 선언문을 만나 LexicalEnvironment의 EnvironmentRecord의 DeclarativeEnvironmentRecord에 name이 등록된다. 이후 함수 선언문을 만나 ObjectEnvironmentRecord에 inner 함수 자체가 등록된다. 이후 OuterEnvironmentReference에 상위 스코프를 가리켜야 하나, 전역 코드의 상위 스코프는 없으므로 null이 할당된다. (this 바인딩 과정은 생략했다.)
전역 코드 실행
전역 실행 컨텍스트가 콜 스택에 쌓이면 전역 코드가 실행된다. 첫 줄에서 name에 Harry가 할당되고, inner()를 만나면 inner코드를 평가한다.
inner 코드 평가
첫 줄에서 변수 선언문을 만나 LexicalEnvironment의 EnvironmentRecord에 name이 등록된다. OuterEnvironmentReference에 상위 스코프인 전역 실행 컨텍스트의 LexicalEnvironment를 할당한다. (역시 this 바인딩 과정은 생략했다.)
inner 코드 실행
inner 실행 컨텍스트가 콜 스택에 쌓이면 전역 코드의 실행이 중지되고 inner 코드가 실행된다. 첫 줄에서 현재 실행 컨텍스트의 LexicalEnvironment의 EnvironmentRecord에 등록된 name에 Hyeok이 할당되고 console.log(name)에서 name이 현재 실행 컨텍스트의 LexicalEnvironment에서 등록되어 있는지 찾는다. 지금은 등록되어있기 때문에 name의 값인 Hyeok을 출력한다.