[JavaScript] Execution Context / Scope Chain

1. 실행 컨텍스트 (Execution Context)

실행 컨텍스트는 "코드가 실행되기 위해 필요한 정보"를 갖고 있다.

👉 전역 코드가 가장 먼저 실행된다.

👉 함수 호출문을 만나면 새로운 실행 컨텍스트가 만들어지면서 해당 함수 코드를 순차적으로 평가한다.

👉 스택(Stack)을 이용해 실행 컨텍스트를 관리한다. 새로운 실행 컨텍스트가 생성되면 스택에 쌓고, 실행 중인 코드가 종료되면 해당 실행 컨텍스트를 스택에서 제거한다.

아래 예시 코드를 통해 실행 컨텍스트가 진행되는 순서를 알아보자.

var person = "tom";

function print() {
  var person2 = "jay";
  
  function innerPrint() {
    console.log(person); // "tom"
    console.log(person2); // "jay"
  }
  
  innerPrint();
}

print();

2. 스코프 (Scope), 스코프 체인 (Scope Chain)

1. Scope

Scope의 사전적 의미는 '범위'로, 식별자의 "유효 범위"를 의미한다.

Scope를 이해하기 위해, 우선 전역 변수(Lexical Variable)와 지역 변수(Local Variable)를 알아보자.

🌼 전역 변수는 전역 공간에서 선언된 변수로, 자바스크립트 어디에서든 사용할 수 있고,
🌼 지역 변수는 함수 내부에서 선언된 변수로, 함수 스코프에서만 사용할 수 있다.

var score = 10; // 전역 변수

function myScore() {
  var score = 30; // 지역 변수
  console.log(score); // 30
}

myScore();
console.log(score); //10

🤔 왜 전역과 지역을 나눌까?
: 충돌을 피하기 위해!! 규모가 큰 프로젝트 개발을 하다 보면, 서로 다른 개발자들이 자신도 모르게 같은 이름의 변수를 사용하는 상황이 발생한다. 이때 지역 변수를 활용하는 것은 이러한 충돌을 막는데 도움이 된다.

2. Scope Chain

각 실행 컨텍스트는 렉시컬 환경(Lexical Environment)을 갖고 있는데, 렉시컬 환경은 환경 레코드(EnvironmentRecord)와 외부 렉시컬 환경(OuterLexicalEnvironment)으로 다시 구성된다.

식별자(변수, 함수)와 그 식별자가 가리키는 값은 키와 값의 쌍으로 environmentRecord에 기록되며, outerLexicalEnvironment에서는 자신의 실행 컨텍스트를 감싸는 외부 실행 컨텍스트에 대한 참조를 갖는다.

실행 컨텍스트에서의 코드를 다시 분석해 보자.

innerPrint()가 호출되었을 때, 두 변수 person과 person2는 자신의 실행 컨텍스트 LexicalEnvironment 안에서 연결된 값을 찾는다. 하지만 person과 person2는 innerPrint 함수 내에서 선언되지 않았기 때문에, outerLexicalEnvironment를 통해 person2는 print 실행 컨텍스트에서, person2는 전역 실행 컨텍스트에서 값을 찾아 출력하게 된다.

✅ 자바스크립트는 전역 공간을 제외하면 오직 함수에 의해서만 실행 컨텍스트가 생성된다.

✅ 실행 컨텍스트 속 식별자의 scope는 안에서부터 바깥으로 차례로 검색해 나가며, 이를 스코프 체인 (Scope Chain)이라 부른다.

(출처 : 고재도, 노지연(2019), [초보자를 위한 JavaScript 200제], 정보문화사)