FRONT/JAVASCRIPT

[javascript] 실행 컨텍스트

연듀 2021. 6. 29. 20:42

 

실행 컨텍스트 자바스크립트의 동작 원리의 핵심 개념이다.

 

 

4가지 타입의 소스코드는 실행 컨텍스트를 생성한다.

 

  • 전역 코드
  • 함수 코드
  • eval 코드
  • 모듈 코드

 

 

소스코드의 평가와 실행

 

  1. 평가
    실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 스코프에 등록한다.

  2. 실행
    선언문을 제외한 소스코드가 순차적으로 실행된다.
    소스코드 실행에 필요한 정보는 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득하고, 소스코드의 실행결과는 다시 스코프에 등록된다.

 

실행 컨텍스트의 역할

 

  1. 전역 코드 평가
  2. 전역 코드 실행
  3. 함수 코드 평가
  4. 함수 코드 실행

 

이러한 순서로 소스코드를 실행하고, 실행 컨텍스트는 이를 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 내부 메커니즘이다.

 

모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다.

 

 

 

 

실행 컨텍스트 스택 

 

코드 실행 순서는 실행 컨텍스트 스택으로 관리한다.

전역 코드 평가하여 전역 실행 컨텍스트를 생성하고, 함수가 호출되면 함수 코드를 평가하여 함수 실행 컨텍스트를 생성한다.

이때 생성되는 실행 컨텍스트 스택은 스택 자료구조로 관리된다.

 

실행 컨텍스트 스택의 최상위에 존재하는 실행 컨텍스트는 언제나 현재 실행 중인 코드의 실행 컨텍스트다.

 

 

 

렉시컬 환경

 

스코프와 식별자를 등록하고 관리한다. 실행 컨텍스트를 구성하는 컴포넌트다.

 

 

 

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

 

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. 전역 환경 레코드 생성
    • 객체 환경 레코드 생성
      전역 객체와 연결
      전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드가 된다.
    • 선언적 환경 레코드 생성
      선언만 되고 초기화는 되지 않기에 일시적 사각지대에 빠진다.
      let, const로 선언한 전역변수를 등록
    2.2 this 바인딩
    전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩된다.

    2.3 외부 렉시컬 환경에 대한 참조 결정
    현재 평가중인 소스코드를 포함하는 외부 소스코드의 렉시컬 환경, 즉 상위 스코프를 가리킨다. 

  3. 전역 코드 실행
    전역 변수 x, y에 값 할당되고 foo함수 호출
    어느 스코프의 식별자를 참조하면 되는지 결정하는 것을 식별자 결정이라 한다.
  4. foo 함수 코드 평가
    1. 함수 실행 컨텍스트 생성
    2. 함수 렉시컬 환경 생성
       2.1 함수 환경 레코드 생성
       2.2 this 바인딩
       2.3 외부 렉시컬 환경에 대한 참조 결정

  5. foo 함수 코드 실행
    지역 변수 x, y에 값이 할당되고 함수 bar 호출
    실행중인 실행 컨텍스트의 렉시컬 환경에서 식별자 검색
  6. bar 함수 코드 평가

  7. bar 함수 코드 실행

  8. console.log(a+b+x+y+z); 실행
    1. console. 식별자 검색
      bar함수-> foo함수 -> 전역 렉시컬 환경으로 이동하여 console 식별자를 검색
    2. log 메서드 검색
      console 객체에서 log 메서드 검색
    3. 표현식 a+b+x+y+z의 평가
      a, b, x, y, z 식별자를 검색
    4. console.log 메서드 호출

  9. bar 함수 코드 실행 종료
  10. foo 함수 코드 실행 종료
  11. 전역 코드 실행 종료

 

 

 

 

 

 

 

'FRONT > JAVASCRIPT' 카테고리의 다른 글

[백준/ node.js] 배열 - 1546번 평균  (0) 2021.07.02
[Javascript] 클로저  (0) 2021.07.01
[javascript] this  (0) 2021.06.26
[javascript] 빌트인 객체  (0) 2021.06.26
[javascript] strict mode란?  (0) 2021.06.25