실행 컨텍스트 with 호이스팅, 스코프체인 - 1

Execution Context (실행 컨텍스트)

실행 컨텍스트라는 단어를 보았을 때에 어떤 말인지 해석하기도, 받아드리기도 힘듭니다. 이는 Exection이라는 단어는 실행으로 번역하고 Context는 영어 그대로를 사용해서 인 것 같습니다. 간단하게실행 컨텍스트(Execution Context)를 쉽게 말하자면 자바스크립트에서 코드가 실행 될 때 필요한 정보(환경)를 말합니다. 여기서 실행되는 코드는 4가지로 분류 됩니다.

• 전역 코드
• Eval 함수
• 함수 코드
• module (import)

첫 번째인 전역 컨텍스트은 자바스크립트가 실행되는 순간에 생성되고 전체 코드가 종료되면 전역 컨텍스트는 종료됩니다. 나머지 3가지는 함수로 취급 할 수 있습니다. 함수가 실행될 때도 마찬가지로 컨텍스트가 생성되고 함수가 종료되면 그 컨텍스트는 종료됩니다. 여기서 추측 할 수 있었겠지만 이 컨텍스트가 하는 일은 함수(코드)가 실행될 때 함수(코드)의 대한 정보(환경)를 담은 것입니다.

여기서 함수를 실행하기 위하여 실행에 필요한 여러가지 정보들은 아래와 같습니다.

• 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수 선언
• 변수의 유효범위(Scope)
• this

Call Stack (콜 스택)

자바스크립트 엔진은 자바스크립트를 구동 할 때에 Call stack을 이용합니다 Call stack이라는 자료구조에 어떤 동작을 해야할 지 쌓아두고 하나씩 처리하게 되는데요. Call stack은 현재 실행 중인 서브루틴에 관한 정보를 저장하는 자료구조입니다. 즉 자바스크립트 엔진이 사용하는 Call stack은 현재는 어떤 일을 동작할 것이고 이 동작이 끝나면 다음 일은 무엇인지 저장 해놓는 자료구조라고 볼 수 있습니다. 아래는 stack이라는 자료구조의 아주 간단한 동작 설명입니다

자료구조 stack의 모습

Push는 해야 할 동작을 맨 위로 쌓는 것이고 동작을 마치면 Pop으로 꺼냅니다. 즉 맨 처음 쌓아놓았던 동작은 가장 마지막에 동작하게 됩니다. (가장 맨 밑에 있으니까요). 이제 자바스크립트 코드로 한번 살펴봅시다.

var name = "Joonkyung";
function sayHi() {
  console.log("Hi " + name);

  function sayBye() {
    console.log("Bye " + name);
    var name = "KyuSung";
  }

  sayBye();

  console.log("Good meeting");
}
sayHi();
console.log("누구 없나요?");

자바스크립트 call stack의 구동모습 추상화

자바스크립트 코드와 콜 스택에 쌓이는 방식을 살펴보면서 보면 더 이해하기 쉽습니다.

1. 자바스크립트가 실행되며 전역 컨텍스트가 생성됩니다.
2. sayHi() 함수를 실행하기 위해 콜 스택 위로 sayHi 실행하기 위한 콘텍스트를 쌓습니다.
3. sayBye() 함수도 마찬가지로 sayBye()를 실행하기 위한 콘텍스트를 쌓습니다.
4. 함수가 차차 하나 씩 실행됨에 따라 맨 위부터 하나씩 제거 됩니다.

실행 컨텍스트의 구성

세가지의 환경 정보가 담깁니다. 이 포스팅에선 앞선 두가지만 설명합니다.

• VariableEnvironment
• LexicalEnvironment
• ThisBinding

Execution Context는 자바스크립트 엔진에 의해서 두 가지의 phase를 거치면서 생성됩니다.

1. Creation Phase
2. Execution Phase

Creation Phase

Execution Context는 Creation phase 동안 생성됩니다. 생성되는 동안 두 가지 일이 발생합니다.

1. LexicalEnviroment 컴포넌트 생성
2. VariableEnvironment 컴포넌트 생성

LexicalEnvironment

환경정보가 담겨 있는 사전이라고 생각하면 됩니다. 변수나 함수 등의 식별자를 정의하는데 사용됩니다. 예를들어 내부 변수 a의 값은 33이다, 외부의 컨텍스트 d를 참조한다등 내부 식별자의 정보와 외부정들이 들어있따. 즉 실행 컨텍스트를 구성하는 환경 정보를 모아 서전처럼 구성한 객체이다.

다음은 LexicalEnVironment의 대표적인 하위 정보 2개이다.

• environmentRecord
• outerEnvironmnetReference

Environment Record는 현재 문맥의 식별자 정보가 수집됩니다. 실행 컨텍스트가 최초에 실행 될 때 제일 먼저 수집됩니다. 아래는 수집된 record의 예시이다.

function foo() {
  var a = 1;
  var b = 2;
  var c = 3;
  let d = 10;
  function bar() {}
}

foo(); // 1. Call

{
  environmentRecord: {
    a: undefined,
    b: undefined,
    c: undefined,
    d: 10,
    bar: <Function> {...}
  },
  outer: foo.[[Environment]]
}

여기서 a, b, c의 수집된 값이 undefined인 것을 볼 수 있습니다. 식별자 정보들을 기록하게 되는데 보통 자바스크립트 개발자라면 알고 있을 현상인데 바로 호이스팅입니다. 대부분 검색을 하다보면 코드 상으로 var (변수 선언) and Function Declaration (함수 선언)들이 최상단으로 올라가는 현상이라고 설명하는데요. 호이스팅은 Environment Record에 저장 될 때 일어나는 현상을 코드 상으로 좀 더 이해하기 싶도록 만든 개념이기도합니다.

호이스팅의 대상:

• var (변수 선언) and Function Declaration (함수 선언)

outerEnvironmentReference는 외부 환경에 대한 참초입니다. 현재 문맥에 관력 있는 외부 식별자정보를 참조하는 일을 합니다. 즉 가장 가까운 스코프의 실행 컨텍스트를 참조하여 가지고 있습니다.

fucntion person() {
    var first = "joon";

    function firstName() {
        return frist;
    }
}

fristName() 함수의 콘텍스트에서 outerEnviromentRecrods는 person(()의 EnvriomentRecords가 되는 것이죠

이렇게 외부 스코프를 타고 타고 연결 되서 참조하는 것을 스코프 체인이라고 합니다. 일단 자신의 records에서 식별자를 통해 값을 찾고 없으면 outerEnviromentRecrods를 타고 값을 찾고 마지막인 전역 컨텍스트까지 연결되는 것이다.

VariableEnvironment

function, 변수 식별자들이 바인딩 되는 점은 같의나 LexicalEnvrionment의 값들은 실행 중에 변하하지만 VarilableEnviroment는 변화하지 않습니다. 최초에 가지던 값 그대로 가지고 있습니다.

Execution Phase

말그대로 자바스크립트 엔진이 코드 한줄 한줄을 해석하고 실행하는 과정입니다. 변수 할당문을 실행하면 변수에 값을 할당하고 함수 실행문을 실행하면 Function Execution Context를 생성합니다.

정리

excution context는 함수를 실행 할때 필요한 환경 정보를 담은 객체입니다. 선언된 식별자 정보, 외부에서 선언된 식별자정보를 얻어 올 수 있습니다. 생성된 excution context들은 자바스크립트 엔진에 의하여 생성되고 excution phase단계에서 하나씩 실행됩니다.