TIL no.62 - 실행 컨텍스트 : JavaScript

실행 컨텍스트에 대해 정리하기 전에 함수의 범위, 스코프에 대해 간략하게 정리하겠습니다.

자바스크립트에서는 전역 변수와 지역 변수를 사용합니다. 전역 변수는 코드의 혼란을 야기하기 때문에 최대한 지양하지만 스코프를 설명하기 위해 두 개념이 필요합니다.

 

스코프 

함수 스코프 때문에 지역변수는 전역변수에 영향을 끼칠 수 없습니다. 

지역 변수는 오직 스코프 라는 단어 그 자체의 의미로 보아 해당 범위 안에서만 사용할 수 있습니다.

자바스크립트는 변수의 범위를 호출한 함수의 지역 스코프부터 전역 변수들이 있는 전역 스코프까지 점차 넓혀가며 찾게 됩니다.

이렇게 지역 스코프에서 찾지 못한 변수를 바깥 스코프, 그리고 전역 스코프까지 옮겨가며 찾는 것을 스코프 체인이라고 부릅니다.

을 실행 컨텍스트로 알아보도록 하겠습니다.

 

 

자바스크립트 엔진이 동작할 때,  브라우저가 스크립트를 로딩해서 실행합니다.

이 순간에 모든 것을 포함하는 전역 컨텍스트가 생기게 됩니다. 전역 컨텍스트는 페이지가 종료될 때까지 유지됩니다.

전역 컨텍스트 arguments 를 가지지 않습니다.

 

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말합니다.

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

outer();
console.log(a);

위의 코드를 실행하게 되면 가장 먼저 전역 컨텍스트가 들어가고 그 다음으로 차곡차곡 스택이 쌓이게 됩니다.

아래 그림과 같이 진행되고 함수가 실행이 처리되면 위에서부터 차례대로 사용되는 변수들의 값을 찾고 없다면 스코프 체인을 돌면서 찾게 됩니다. 내부에서 바깥 스코프로 찾게되고 마지막으로 전역 컨텍스트가 사라집니다.

 

실행 컨텍스트는 활성화되는 시점에 아래 세 가지 정보를 수집합니다.

 

VariableEnvironment

 

LexicalEnvironment

 

ThisBinding

 

 

VariableEnvironment

VariableEnvironment 안에 담기는 내용은 LexicalEnvironment 와 같지만 최초 실행 시의 스냅샷을 유지한다는 점이 다릅니다.

실행 컨텍스트를 생성할 때 VariableEnvironment 에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment 를 만들고, 이후에는 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment 를 만들고, 이후에는 LexicalEnvironment 를 주로 사용하게 됩니다.

 

 

LexicalEnvironment

일반적으로 렉시컬 환경을 '어휘적 환경', '정적 환경' 이라는 단어로 표현하기도 합니다. 코어 자바스크립트의 저자는 이 렉시컬 환경을 '사전적인 환경' 이라는 의미와 가장 비슷하다고 설명하기도 했습니다. 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것입니다.

 

 

ThisBinding 

실행 컨텍스트의 thisBinding 에는 this 로 지정된 객체가 저장됩니다. 실행 컨텍스트 활성화 당시에 this 가 지정되지 않은 경우 this 에는 전역 객체가 저장됩니다. 그 밖에는 함수를 호출하는 방법에 따라 this 에 저장되는 대상이 다릅니다.