1. Execution Context(실행문맥)

JS엔진이 코드를 실행하기 위해서는 스코프, 식별자, 코드 실행순서 등의 관리가 필요하다.
이러한 모든것을 관리하는 것이 실행컨텍스트로 소스의 실행 환경을 제공하고, 실행결과를 관리하는 영역이다.

  • 실행 컨텍스트는 객체로 존재
  • 엔진이 사용하기위한 객체로, 개발자가 코드를 통해 접근할수 없다.
  • 실행 컨텍스트는 렉시컬 환경을 구성요소로 가지고 있다.

1.1 소스 코드별 실행 컨텍스트

소스 코드타입에 따라 실행 컨텍스트도 각각 생성되며 조금씩 다르게 생성/관리된다.

1.2 실행 컨텍스트

LexicalEnvironment와 VariableEnviroment를 구성요소로 갖는다.

  • LexicalEnvironment
  • VariableEnviroment

1.2.1 Lexical Environment(렉시컬 환경)

식별자와 그에 바인딩된 값, 상위 스코프에 대한 참조를 가지고 있는 자료구조로 실행컨텍스트의 구성요소이다.
아래의 구성요소를 갖는다.

  • EnvironmentRecord
    • 스코프에 포함된 식별자를 등록하고, 식별자에 바인딩된 값을 관리
    • 소스코드의 타입에 따라 관리하는 내용에 차이가 있다.
  • OuterLexicalEnvironmentReference
    • 상위 스코프를 가리킨다.
    • 상위 스코프의 렉시컬 환경을 말함.

2. 예제에 따른 실행 컨텍스트 구조

2.1 예제 소스

var x=1;                        //Line 1
const y=2;						//Line 2
function foo(a){				//Line 3
  var x=3;						//Line 4
  const y=4;					//Line 5
  function bar(b){				//Line 6
    const z=5;					//Line 7
    console.log(a+b+x+y+z);		//Line 8
  }								//Line 9
  bar(10);						//Line 10
}								//Line 11
foo(20) //42					//Line 12

2.2 예제 수행 순서(평가->실행)

  1. 전역객체 생성(window)
  2. 전역코드 평가 (1단계)
  3. 전역코드 실행

    1.foo 함수 코드 평가(2단계)

    1. foo(20) 실행

      2.1 bar 함수 코드 평가(3단계)
      2.2 bar(10) 함수 실행
      2.3 bar(10) 함수 실행 종료

    2. foo(20) 실행 종료
  4. 전역 코드 실행 종료

2.2.1 전역코드 평가 단계(1단계)시 렉시컬 환경

  1. 전역 실행 컨텍스트 생성
  2. 전역 렉시컬 환경 생성
    2.1 GlobalEnvironmentRecord(전역환경 레코드) 생성
    - 2.1.1 ObjectEnvironmentRecord(객체 환경 레코드) 생성
    - 2.1.2 DeclarativeEnvironmentRecord(선언적 환경 레코드) 생성
    2.2 this바인딩
    2.3 OuterLexcialEnviromentReference(외부렉시컬 환경)에 대한 참조 결정
Line 2 실행 후 렉시컬 환경

주의해서 봐야 할 내용

  • const, var, function의 생성위치가 다르다
  • bar에 대한 할당은 현재 없다.

2.2.2 foo 함수 코드 평가 단계(2단계)시 렉시컬 환경

  1. 함수 실행 컨텍스트 생성
  2. 함수 렉시컬 환경 생성
    2.1 FunctionEnvironmentRecord(함수 환경 레코드) 생성
    2.2 this바인딩
    2.3 OuterLexcialEnviromentReference(외부렉시컬 환경)에 대한 참조 결정
Line 4 실행 전 렉시컬 환경

※중요 사항

  • 함수가 어디서 선언되었는지에 따라서 스코프가 결정되는 것이 렉시컬 스코프(lexical scope)이고,
  • 함수가 어디서 호출되는지에 따라서 스코프가 결정되는 것이 다이나믹 스코프(dynamic scope)이다.
  • 자바스크립트는 렉시컬 스코프이다.
  • 즉 bar 함수의 선언위치에 따라 렉시컬 환경은 변하게 된다.
  • OuterLexicalEnvironmentReference를 통해 스코프 체이닝이 이루어진다.

※참고사항

  • 함수 환경 레코드의 경우 arguments 레코드가 생성된다.
  • foo 함수가 실행되면 각 식별자에 값이 할당된다.

2.2.3 bar 함수 코드 평가 단계(3단계)시 렉시컬 환경

  1. 렉시컬 환경 생성 순서는 foo함수 코드평가 단계(2단계)와 동일한다.
  2. 함수 실행 컨텍스트 생성
  3. 함수 렉시컬 환경 생성
    2.1 FunctionEnvironmentRecord(함수 환경 레코드) 생성
    2.2 this바인딩
    2.3 OuterLexcialEnviromentReference(외부렉시컬 환경)에 대한 참조 결정
Line 6 실행 전 렉시컬 환경

2.2.4 bar 함수 코드 실행 종료

※중요 사항

  • 실행 컨텍스트 스택에서 'bar Execution Context' 제거
  • bar Excution Context가 제거되어도 만약 bar Lexcal Environment를 다른곳에서 참조하고 있다면 bar Lexical Enviroment는 소멸하지 않는다. (=> Closure)
profile
두걸음 뒤에서.. 그래도 끝까지!!

0개의 댓글