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

실행 컨텍스트(execution context)

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
• 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성
• 이 구성을 call stack에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장
• 구성방법은 전역공간, eval() 함수, 함수 등이 있어 거의 함수를 실행하는 것으로 구성이 가능
  • ES6에서는 블록에 의해서도 새로운 실행 컨텍스트가 생성됨
• 이 객체는 브라우저 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인할 수는 없음

다음은 실행 컨텍스트의 수집 정보들이다.

VariableEnviroment

• 현재 컨텍스트 내의 식별자들에 대한 정보 및 외부 환경 정보
• 선언 시점의 LexicalEnvironment의 snapshot으로, 변경 사항은 반영되지 않음
• 실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담은 다음
  • 이를 그대로 복사해서 LexicalEnvironment를 만들고
  • 이후에는 주로 LexicalEnvironment를 주로 활용함
• 일반 추상 개념 variable environment를 자바스크립트에서 구현한 구체적 대상이 VariableEnvironment

LexicalEnvironment

• 수시로 변하는 환경 정보
• 컨텍스트를 구성하는 환경 정보들을 사전에서 접하는 느낌으로 모아놓은 것
  • 예로 현재 컨텍스트의 내부에는 a, b, c와 같은 식별자들이 있고 그 외부 정보는 D를 참조하도록 구성
• 일반 추상 개념 lexical environment를 자바스크립트에서 구현한 구체적 대상이 LexicalEnvironment
• 처음에는 VariableEnvironment와 같지만 변경 사항이 실시간으로 반영됨

environmentRecord

• 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됨
  • 매개변수의 이름 : 컨텍스트를 구성하는 함수에 지정된 매개변수 식별자
  • 함수 선언 : 선안한 함수가 있는 경우 함수 그 자체
  • 변수명 : var로 선언된 변수의 식별자
• 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집
  • 수집을 마쳤다하더라도 아직 코드들은 실행되기 전 상태이지만
  • 이미 해당 환경에 속한 코드의 변수명들을 모두 알게 되는 셈

hoisting

• 엔진의 실제 동작 방식 대신에 ‘자바스크립트 엔진은 식별자들을 최상단으로 끌어올려놓은 다음 실제 코드를 실행한다’라고 생각한다면
  • 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념
• 자바스크립트 엔진이 실제로 끌어올리지는 않지만 편의상 끌어올린 것으로 간주하자
  • 변수 혹은 함수 선언부만 끌어올려지며
  • 할당부는 그 자리에 그대로 유지됨
• 함수도 호이스팅 됨
  • 자바스크립트의 창시자인 브랜든 아이크가 자바스크립트를 유연하고 배우기 쉬운 언어로 만들고자 해서 탄생한 개념
  • 덕분에 함수를 선언한 위치와 무관한게 그 함수를 실행할 수 있게 됐지만 오히려 이로 인해 더 많은 혼란을 야기하기도 함

호이스팅은 이 글 - 예제로 만나보는 자바스크립트 호이스팅에서 자세히 살펴 볼 수 있다.

Scope Chain

• 스코프
  • 식별자에 대한 유효범위
    • 어떤 경계 A의 외부에서 선언한 변수 A의 외부에서 접근 가능
    • A의 내부에서도 접근이 가능
    • A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근 가능
• 스코프 체인
  • 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것
  • 특정 함수 안에서 새로운 함수를 선언했다면 2번째 함수는 outerEnvironmentReference는 바깥에 있는 함수의 LexicalEnviromnet를 참조
    • 이런식으로 현재 함수가 선언된 함수들의 outerEnvironment가 연결리스트 형태를 띄게 됨
  • 선언 시점의 LexicalEnvironment를 계속 찾아 올가라면 결국 최상위에는 전역 컨텍스트의 LexicalEnvironment가 있을 것

References

• 코어 자바스크립트
• 실행 컨텍스트와 자바스크립트의 동작 원리