실행 컨텍스트

Seongkyun Yu·2020년 12월 7일

JavaScript 실행 컨텍스트

TIL - Javascript

목록 보기

17/28

기존 블로그에 작성한 내용을 velog로 이전한 글입니다

1. 실행 컨텍스트

소스 코드를 실행하기 위해 필요한 환경 및 실행 결과를 관리하는 영역
소스 코드의 타입별 생성 과정 및 관리 내용
- 전역 코드 : 전역 스코프 생성 및 전역 변수 관리 (함수, 클래스 등 내부 코드 미포함)
- 함수 코드 : 지역 스코프 생성 및 지역 변수 관리 (중첩 함수, 클래스 등 내부 코드 미포함)
- eval 코드 : 엄격 모드에서 독자적 스코프 생성
- 모듈 코드 : 모둘별 독립적 스코프 생성

2. 소스 코드 평가와 실행

순서

소스 코드의 평가
실행 컨텍스트 생성
선언문 실행 후 변수 or 함수 식별자를 렉시컬 환경 레코드에 등록
선언문이 아닌 소스코드 실행
실행 결과를 실행 컨텍스트가 관리하는 렉시컬 환경 레코드에 등록

3. 실행 컨텍스트 동작 예

// 전역 변수 선언
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

전역 코드 평가

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

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

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

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

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

실행 컨텍스트 스택

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

렉시컬 환경

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

스코프와 식별자를 관리함

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

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. 전역 실행 컨텍스트 생성
1. 전역 렉시컬 환경 생성
  
  2.1. 전역 환경 레코드 생성
  - 2.1.1. 객체 환경 레코드 생성
    
    전역 객체와 연결
    
    전역 변수와 전역 함수는 전역 객체의 프로퍼티와 메소드가 된다
  - 2.1.2. 선언적 환경 레코드 생성
    
    let, const로 선언한 전역변수를 등록
    
    선언만 되고 초기화는 되지 않기에 일시적 사각지대가 생김
  2.2. 외부 렉시컬 환경에 대한 참조 할당
  
  외부 렉시컬 환경에 대한 참조(Outer Lexical Environment Reference)에 상위 스코프를 연결
  
  2.3. this 바인딩
  
  전역 환경 레코드의 [[GlobalThisValue]] 내부 슬롯에 this가 바인딩
  
  전역 코드에서 일반적으로 this는 전역 객체를 가리킨다

전역 코드 실행

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

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

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

foo 함수 코드 평가
1. 함수 실행 컨텍스트 생성
2. 함수 렉시컬 환경 생성
  
  2.1. 함수 환경 레코드 생성
  
  2.2. 외부 렉시컬 환경에 대한 참조 할당
  
  2.3. this 바인딩

foo 함수 코드 실행

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

매개 변수에 인수가 할당 됨

함수 bar가 호출 됨

bar 함수 평가

bar 함수 코드 실행

매개 변수에 인수가 할당 됨

지역 변수 z에 값이 할당 됨

console.log 실행
1. 식별자 console 검색
  
  bar -> foo -> 전역 순으로 이동하며 스코프 체인을 검색한다
2. log 메소드 검색
  
  console 객체에서 log 메소드 검색 (프로토 타입 체인 이용)
3. 표현식 a + b + x + y + z 평가
  
  표현식 평가 위해 식별자들(a,b,x,y,z)을 검색 (스코프 체인)
4. console.log 메소드 호출