실행 컨텍스트(Execution Context)

개요

• 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체 - 여기서 환경이라고 하면 코드 실행에 영향을 주는 조건이나 상태
• 식별자 결정을 더 효율적으로 하기 위한 수단으로, 필요한 정보를 한데 모아 제공하는 객체
• 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 호이스팅, 렉시컬 환경 조성, this 값 결정 등 여러 동작을 수행
• 실행 컨텍스트는 스코프, 호이스팅, 클로저와도 깊게 연관되어 있음

실행 컨텍스트의 등장

ES3

• 동적 스코프 → Variable Object + Scope Chain + this
  • 함수의 호출 위치에 따라 동적으로 스코프를 생성, 호출할 때마다 호출 위치에 맞는 별도의 스코프를 생성하고 스코프 체이닝 필요

ES5~ (2009~)

• 정적 스코프 → Execution Context
  • 실행 컨텍스트라는 하나의 묶음으로 관리, 선언과 동시에 실행 순서를 보장 → 자바스크립트 엔진은 더 빠르고 효율적으로 식별자 결정 가능

활성화된 실행컨텍스트 구조

VariableEnvironment - 초기상태 유지

• environmentRecord
  • 매개변수명, 변수의 식별자, 함수명 등을 수집
• onterEnvironmentReference
  • 바로 직전 컨텍스트의 LexicalEnvironment를 참조

LexicalEnvironment - 변경사항 반영

• environmentRecord, onterEnvironmentReference로 구성 - VariableEnvironment와 동일함

ThisBinding

• 활성화 당시 지정된 this가 저장
• 지정되지 않은 경우 브라우저 환경에선 window, node.js 환경에는 global

콜 스택에서의 실행 컨텍스트

• 기본적으로 콜 스택은 출입구가 하나인 데이터 구조로 A, B, C로 쌓이면 C, B, A로 나갈 수밖에 없고, 가장 최근에 추가된 실행 컨텍스트만 활성화
• 일단 자바스크립트가 실행되면 별도의 실행 명령이 없더라도 콜 스택에 전역 실행 컨텍스트를 먼저 담음
• 전역에서 외장 함수를 실행할 경우 함수의 실행 컨택스트를 담음
• 외장 함수 내에서 중첩 함수가 실행할 경우 중첩 함수의 실행 컨텍스트를 담음
• 각각의 함수의 실행이 끝나면 실행 컨텍스트가 사라지고, 전역에 있는 마지막 라인의 코드까지 모두 실행되면 전역 실행 컨텍스트까지 사라짐

환경 레코드(Environment Record)

• 식별자와 식별자에 바인딩된 값을 기록해두는 객체
• 호이스팅은 물리적으로 코드가 끌어 올려진 것이 아니라 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트 기록하기 때문

외부 환경 참조(Outer Environment Reference)

• 스코프 체이닝을 위해 외부 환경 정보를 구성, 외부 환경 참조(Outer Environment Reference)는 선언되었을 당시의 상위 Lexical Environment를 참조
• 그래서 자바스크립트 엔진은 새로 생성된 실행 컨텍스트에 바깥 렉시컬 환경으로 돌아갈 수 있는 Outer Environment Reference를 남겨 놓음 → 필요한 경우 이전 실행 컨텍스트 환경 레코드에 저장된 식별자 참조 가능
• 식별자를 결정할 때 현재 활성화된 실행 컨텍스트의 환경 레코드를 찾고, 바깥 렉시컬 환경에서 찾아보고, 끝내 없으면 전역 실행 컨텍스트까지 확인, 이러한 과정에서 사용되는 개념이 실행 컨텍스트
• 식별자 결정을 진행할 때 변수 은닉화(Variable Shadowing)이 발생하는데, 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상
• 식별자를 결정할 때 활용하는 스코프들의 연결리스트를 스코프 체인(Scope Chain), 이러한 과정 자체를 스코프 체이닝

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

생성 단계(Creation Phase)

• 본격적인 생성에 앞서 스캔하고 준비하는 단계 → Execution Context 생성, 선언문만 실행해서 환경 레코드에 기록

실행 단계(Execution Phase)

• 선언문 외 나머지 코드 순차적 실행, 환경 레코드를 참조하거나 업데이트

예시

• 예컨대 var를 선언하고 최상단에 var를 console.log로 찍어봤을 때 에러가 나지 않고 undefined 찍히는 호이스팅이 발생하는데, 이런 호이스팅이 생기는 이유는 자바스크립트 엔진이 먼저 전체 코드를 스캔하면서 변수 같은 정보를 실행 컨텍스트에 기록해놓기 때문 → 이때 나오는 개념이 실행 컨텍스트
• 물론 console.log 또한 내장함수이기 때문에 이 함수의 실행 컨텍스트 또한 생성
• 이때 var를 기록해놓는 곳이 바로 환경 레코드(Environment Record)로 식별자와 식별자에 바인딩된 값을 기록해두는 객체

참고자료

• 코어 자바스크립트(정재남, 2019)
• https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0
• https://youtu.be/EWfujNzSUmw