JS 실행 컨텍스트란?

들어가기

js 공식 문서나 관련 자료들을 찾아보면 컨텍스트, 실행 컨텍스트 라는 단어가 많이 들어가는 것 같다. 글을 읽다 보면 대충 컨텍스트가 이런 걸 말하는 거구나 하고 넘겼었는데 최근 기초부터 다시 공부하다 보니 실행 컨텍스트라는 단어가 유독 많이 나오는 것 같아서 컨텍스트에 대해 정확히 짚고 가자 싶어서 정리했다.

실행 컨텍스트에 대해 알아보자

실행 컨텍스트(Execution Context)란 쉽게 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아둔 환경이라고 생각하면 될 것 같다 :)

 

1. 실행 가능한 코드가 뭘까?

자바스크립트에서 실행 가능한 코드의 정의는 아래와 같다..!

---

1. 전역에 존재하는 코드

2. 함수 코드

3. Block - ES6 이상

4. Eval 코드

 

2. 그럼 코드 실행에 필요한 환경 정보들은?

자바스크립트 엔진은 코드가 실행되기 위해 아래와 같은 정보를 알고 있어야 한다.

---

1. 변수 - 전역 변수, 지역 변수, 매개 변수, 프로퍼티

2. 함수 선언

3. 변수의 유효 범위 : Scope

4. this

이제 실행 컨텍스트가 어떻게 만들어지는지 알아보자

자바스크립트는 위에서 정리한 실행 가능한 코드를 사용하면 실행 컨텍스트를 생성한다.

아래 코드로 살펴보자

// 전역 컨텍스트
const ggg = "전역";

const a = () => {
  // a 컨텍스트
  console.log("b");
};

const b = () => {
  // b 컨텍스트
  console.log("c");
};

a();
b();

전역 공간은 자동으로 전역 컨텍스트로 생성되고 모든 코드가 실행이 완료되거나 앱을 종료하지 않는 이상 계속 남아있다.

---

그리고 실행 컨텍스트를구성할 때 VariableEnvironment, LexicalEnvironment, ThisBinding이 생기는데

VariableEnvironment은 실행 컨텍스트가 실행된 시점에 대한 정보를 가지고 있고 LexicalEnvironment는 VariableEnvironment와 동일하지만 최신 정보를 담고 있다.. 즉 처음엔 LexicalEnvironment을 복사해서 가지고 있다가 환경 정보가 변경되면 그 정보를 실시간으로 반영한다. 그리고 ThisBinding은 this가 바라봐야할 대상을 지정하는 것을 말한다..!

 

VariableEnvironment/LexicalEnvironment

1. 외부 환경 정보

2. 현재 컨텍스트 내의 식별자에 대한 정보

3. 변경 사항 실시간 반영 -> LexicalEnvironment 만 해당

끝

일단 내가 궁금했던 내용은 여기까지.. 더 딥한 내용은 다음에 정리해야지..