23.09.25 실행 컨텍스트(Execution Context)(다시 정리)

기존에 정리한 글이 있어서 다시 보니까 글이 너무 난잡해서 오히려 더 내용을 모르겠어서 다시 정리했다. 솔직히 지금도 잘한다 말할 순 없지만 이것도 이렇게 쓰다보니 느는 것 같긴다. 

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아 놓은 객체이며, 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다.

언제 생길까? 

• 전역공간
• 함수를 실행한다.
• eval() 함수를 실행한다.
• block을 만든다 (ES6+)

 

어떻게 동작할까?

// ------------------- (1)
var a = 1;
function outer() {
  function inner() {
    console.log(a);
    var a = 3;
    // --------------- (2)
  }
  inner(); // -------- (3)
  console.log(a);
  // ----------------- (4)
}
outer(); // ---------- (5)
console.log(a);
// ------------------- (6)

https://taenami.tistory.com/109

이것을 먼저 알고 가자. 

첫째, "콜스택"은 프로그래밍 언어에서 함수 호출을 추적하는 데 사용되며, "스택"은 데이터 저장 및 관리를 위한 범용 자료 구조이다.

둘째, 실행 컨텍스트는 가상의 개념이며, 실제로는 JavaScript 엔진 내부에서 코드 실행과 관련된 정보를 추상화하고 관리하는 데 사용되는 내부적인 개념이다.

셋째, 그림에서 가장 먼저 보이는 빈 공간이 콜스텍이고, 실행 컨텍스트는 그 안에 각각의 객체의 형태이다.

 

실행 순서

전역 컨텍스트 생성 (1) 

outer 함수 실행 (5)

outer 함수 내부에서 inner 함수 실행 (3)

inner 함수 종료 (2)

outer 함수 내부의 console.log(a) (4)

outer 함수 종료 후 전역에서  console.log(a) (6)

 

즉, (1) → (5) → (3) → (2) → (4) → (6)

 

실행 컨텍스트 안에는

• VariableEnvironment 
  • 현재 컨텍스트 내의 식별자(변수)들에 대한 정보
  • 외부 환경 정보
  • 선언 시점의 LexicalEnvironment의 *스냅샷(변경사항 반영 X)
     *스냅샷: 현재 상태나 데이터의 복사본을 나타내는 용어이다.

 

• LexicalEnvironment
  • 처음에는 VariableEnvironment와 같음
  • 변경 사항이 실시간으로 반영됨

 

• ThisBinding
  • 식별자가 바라봐야 할 대상 객체

 

자료를 찾으면서 렉시컬 환경 대신 스코프 체인이 언급되는 경우가 자주 있었는데 렉시컬 환경 내부에 스코프 체인이 포함되어 있다. 이번 정리에서 중요한 부분은 실행 컨텍스트가 무엇이냐고 물었을 때 내가 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체라는 답변을 제대로 할 수 있게 해주는 것이다.

 

렉시컬 환경은 따로 또 정리해야겠다.