[JS] 실행 컨텍스트

JS 실행컨텍스트

실행 컨텍스트

실행한 코드에 제공하기 위한 환경 정보를 모아놓은 객체입니다.

 

자바스크립트 엔진은 코드를 실행하기 전 모든 코드를 훑어서 환경정보를 수집합니다.

콜스텍에 전역 컨텍스트가 담기고 그 위로 실행 컨텍스트가 쌓아 올라갑니다.

• 실행컨텍스트를 구성할 수 있는 방법은 함수를 실행하는 것입니다.

 

위에 있는 컨텍스트를 콜스텍에서 꺼내면서 컨텍스트와 관련된 코드들을 실행하며 코드의 환경과 순서를 보장합니다.

 

가장 먼저 전역 컨텍스트를 콜스텍에 담으며 함수를 만나게 되면 그 함수의 컨텍스트를 생성하고 콜스택에 담습니다.

이후 맨 위의 컨텍스트에 해당하는 코드들을 순차적으로 실행합니다.

 

실행컨텍스트에 담기는 정보

• VariableEnvironment:
  • 환경레코드 (snapshot)
  • outerEnvironmentReference (snapshot)
  • 현재 컨텍스트의 정보로 변경되지 않음

• LexicalEnvironment:
  • 환경레코드
  • outerEnvironmentReference
  • 이들은 변경사항이 실시간으로 반영 됨

• ThisBinding

 

VariableEnvironment

LexicalEnvironment 와 같지만 변경되지 않는 것이 차이점입니다.

실행 컨텍스트 생성시 VariableEnvironment에 먼저 정보를 담고 LexicalEnvironment 를 만들어서 LexicalEnvironment 를 계속 활용합니다.

 

LexicalEnvironment

환경레코드

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됩니다.
  • 식별자는 변수명입니다.
  • 선언된 함수도 역시 저장되며 var 선언된 변수 등등 순서대로 수집합니다.

 

이들이 저장된다는 뜻은 코드가 실행되기 전 식별자들을 이미 최상단으로 끌어올린 상태라고 볼 수 있으며, 이 상황을 호이스팅이라고 볼 수 있습니다.

여기서 함수 선언문과 함수 표현식의 차이가 나타납니다.

function declaration(){}; // 함수 선언문
var expression = function(){}; // 함수 표현식

//호이스팅으로 끌어올려진다면
function declaration(){}; // 전부 올려짐
var expression; // 변수 선언부만 올려짐

"선언후에 호출할 수 있다"라는 원리를 지키기 위해서는 표현식을 쓰는것이 혼란을 막을 수 있습니다.

 

스코프, 스코프 체인

스코프는 식별자에 대한 유효 범위 입니다.

식별자의 유효범위를 점점 바깥으로 나가서 검색하는 것을 스코프 체인 이라고 합니다.

그리고 스코프 체인을 가능하게 하는 것이 outerEnvironmentReference 입니다.

 

outerEnvironmentReference

outerEnvironmentReference는 함수가 선언될 당시의 LexicalEnvironment를 참조합니다.

"함수가 선언될 당시의" 라는 뜻은 내부 함수 밖의 LexicalEnvironment 를 가리킵니다.

그렇다면 LexicalEnvironment 의 outerEnvironmentReference를 점점 따라가다 보면 결국 전역 컨텍스트의 LexicalEnvironment 에 도착할것입니다.

이러한 특성으로 스코프체인을 통해서 가장 먼저 발견되는 식별자에 접근이 가능합니다.

thisBinding

여기에서는 this로 지정된 객체가 저장됩니다.

지정되지않을 경우 this 에는 전역객체가 저장됩니다.

 

전역변수와 지역변수

코드의 안정성을 위해서 가급적 전역변수의 사용을 최소화야합니다.

• 즉시실행함수의 활용
• 네임스페이스
• 모듈패턴
• 샌드박스 패턴
• ETC( 모듈관리도구 AMD, CommonJS, ES6의 모듈)

 

추가 의문

결국 LexicalEnvironment를 활용할것이라면 VariableEnvironment은 왜 필요한 것일까?

 

이 글은 "코어자바스크립트" 내용에 기반하여 작성한 글입니다.
잘못된 부분이나 이해가 잘못된 부분에 대해서는 댓글로 써주시면 감사하겠습니다!