실행 컨텍스트 (Execution Context)

1. 실행 컨텍스트

• 소스 코드를 실행하기 위해 필요한 환경 및 실행 결과를 관리하는 영역

• 소스 코드의 타입별 생성 과정 및 관리 내용

  • 전역 코드 : 전역 스코프 생성 및 전역 변수 관리 (함수, 클래스 등 내부 코드 미포함)

  • 함수 코드 : 지역 스코프 생성 및 지역 변수 관리 (중첩 함수, 클래스 등 내부 코드 미포함)

  • eval 코드 : 엄격 모드에서 독자적 스코프 생성

  • 모듈 코드 : 모둘별 독립적 스코프 생성

2. 소스 코드 평가와 실행

• 순서

1. 소스 코드의 평가

2. 실행 컨텍스트 생성

3. 선언문 실행 후 변수 or 함수 식별자를 렉시컬 환경 레코드에 등록

4. 선언문이 아닌 소스코드 실행

5. 실행 결과를 실행 컨텍스트가 관리하는 렉시컬 환경 레코드에 등록

3. 실행 컨텍스트 동작 예

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// 전역 변수 선언
const x = 1;
const y = 2;

// 함수 정의
function foo(a) {
  // 지역 변수 선언
  const x = 10;
  const y = 20;

  // 메소드 호출
  console.log(a + x + y); // 130
}

// 함수 호출
foo(100);

// 메소드 호출
console.log(x + y); // 3

1. 전역 코드 평가

   변수 선언문, 함수 선언문 실행 후 실행 컨텍스트에 등록

2. 전역 코드 실행

   전역 코드 실행. 이때 전역 변수에 값 할당, 함수 호출됨

3. 함수 코드 평가

   함수 실행 전 함수 코드 평가, 지역 스코프 생성 및 지역 변수 등록

4. 함수 코드 실행

   함수 코드 실행. 매개 변수와 지역 변수에 값 할당 및 console.log 호출

4. 실행 컨텍스트 스택과 렉시컬 환경

• 실행 컨텍스트 스택

  코드의 실행 순서를 관리, 현재 실행 중인 컨텍스트는 최상위에 존재

• 렉시컬 환경

  실행 컨텍스트의 컴포넌트로 식별자, 값, 상위 스코프 참조를 기록하는 환경

  스코프와 식별자를 관리함

5. 실행 컨텍스트의 생성과 식별자 검색 과정

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var x = 1;
const y = 2;

function foo(a) {
  var x = 3;
  const y = 4;

  function bar(b) {
    const z = 5;
    console.log(a + b + x + y + z);
  }
  bar(10);
}

foo(20); // 42

1. 전역 객체 생성

2. 전역 코드 평가

   1. 전역 실행 컨텍스트 생성
   
   

   2. 전역 렉시컬 환경 생성

      2.1. 전역 환경 레코드 생성

      • 2.1.1. 객체 환경 레코드 생성

        전역 객체와 연결

        전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드가 된다

      • 2.1.2. 선언적 환경 레코드 생성

        let, const로 선언한 전역변수를 등록

        선언만 되고 초기화는 되지 않기에 일시적 사각지대가 생김

      
      

      2.2. 외부 렉시컬 환경에 대한 참조 할당

      외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)에 상위 스코프를 연결

      
      

      2.3. this 바인딩

      전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩

      전역 코드에서 일반적으로 this는 전역 객체를 가리킨다

3. 전역 코드 실행

   전역 변수 x, y에 값이 할당되고 foo가 호출 됨

   어떤 식별자를 사용할지 결정하는 것을 식별자 결정이라고 함

   식별자 결정을 위해 실행 중인 컨텍스트에서 식별자 검색 시작

4. foo 함수 코드 평가

   1. 함수 실행 컨텍스트 생성

   2. 함수 렉시컬 환경 생성

      2.1. 함수 환경 레코드 생성

      2.2. 외부 렉시컬 환경에 대한 참조 할당

      2.3. this 바인딩

5. foo 함수 코드 실행

   지역변수 x, y에 값이 할당 됨

   매개 변수에 인수가 할당 됨

   함수 bar가 호출 됨

6. bar 함수 평가

7. bar 함수 코드 실행

   매개 변수에 인수가 할당 됨

   지역 변수 z에 값이 할당 됨

8. console.log 실행

   1. 식별자 console 검색

      bar -> foo -> 전역 순으로 이동하며 스코프 체인을 검색한다

   2. log 메소드 검색

      console 객체에서 log 메소드 검색 (프로토 타입 체인 이용)

   3. 표현식 a + b + x + y + z 평가

      표현식 평가 위해 식별자들(a,b,x,y,z)을 검색 (스코프 체인)

   4. console.log 메소드 호출

9. bar 함수 코드 실행 종료

   실행 컨텍스트 스택에서 bar 함수 실행 컨텍스트를 Pop하여 제거

   누군가에게 bar 렉시컬 환경이 참조 되지 않으면 가비지 컬렉터에 의해 해제 됨

10. foo 함수 코드 실행 종료

    실행 컨텍스트 스택에서 foo 함수 실행 컨텍스트를 Pop하여 제거

11. 전역 코드 실행 종료

    실행 컨텍스트 스택에서 전역 실행 컨텍스트를 Pop하여 제거

6. 실행 컨텍스트와 블록 레벨 스코프

• 블록 스코프가 생기면 선언적 환경 레코드를 갖는 새로운 렉시컬 환경을 만들고 교체한다

• 블록문이 종료되면 블록문이 실행되기 이전의 렉시컬 환경으로 되돌린다

  
  

참고자료: poiemaweb.com

• ← Previous Post
• Next Post →