[자바스크립트] 실행 컨텍스트(2) - 과정

이윤우·2022년 10월 26일

JavaScript

목록 보기

10/34

1. 실행 컨텍스트의 생성 과정

앞에서 살펴본 아래의 코드를 가지고 실제로 어떻게 실행 컨텍스트가 생성되는지 알아보자.

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}

foo();

1) 전역 코드에의 진입

(실행 컨텍스트 진입 이전) 유일한 전역 객체 생성
- 전역 객체에 빌트인 객체(Math, String, Array)와 BOM, DOM 설정
- 코드의 어디에서도 접근 가능
(전역 코드로 컨트롤 진입) 전역 실행 컨텍스트가 생성되고 실행 컨텍스트 스택에 쌓임
실행 컨텍스트를 바탕으로 아래의 처리가 실행
(1) 스코프 체인의 생성과 초기화
(2) Variable Instantiation(변수 객체화) 실행
(3) this value 결정

(1) 스코프 체인의 생성과 초기화

(2) Variable Instantiation(변수 객체화) 실행

변수, 매개변수와 인수 정보(arguments), 함수 선언을 변수 객체(Variable Object / VO)에 추가하여 객체화
```
변수 객체화 실행 순서 상, 2.함수 foo의 선언이 처리되고 그 후 3.변수 x의 선언이 처리된다.
 (함수 코드가 아닌 전역 코드이기 때문에 1.매개변수 처리는 실행되지 않는다.)
```
1. 매개변수(parameter)와 인수(argument)
  매개변수가 변수 객체의 프로퍼티로, 인수가 값으로 설정
2. 함수 선언
  함수명이 변수 객체의 프로퍼티로, 생성된 함수 객체가 값으로 설정
  
  함수 foo의 선언 처리
  [[Scopes]] 프로퍼티 - 함수 객체가 실행되는 환경(현재 실행 컨텍스트의 스코프 체인)을 가리킴
  
  자신을 포함하는 외부 함수의 실행 컨텍스트가 소멸하여도 [[Scopes]] 프로퍼티가 가리키는 외부 함수의 실행 환경은 소멸하지 않고 참조할 수 있다. => 클로저
3. 변수
  변수명이 변수 객체의 프로퍼티로, undefined가 값으로 설정
  
  변수 x의 선언 처리
  선언 단계: 변수 객체에 변수를 등록한다. 이 변수 객체는 스코프가 참조할 수 있는 대상이 된다.
  초기화 단계: 변수 객체에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화
  할당 단계: undefined로 초기화된 변수에 실제값을 할당한다.
  
  var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다.
  => 변수 호이스팅(Variable Hoisting)
  
  (3) this value 결정
  - is value가 결정되기 이전에 this는 전역 객체를 가리키고 있다가 함수 호출 패턴에 의해 this에 할당되는 값이 결정된다.
  - 전역 코드의 경우, this는 전역 객체를 가리킨다.

2) 전역 코드의 실행

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}

foo();

(1) 변수 값의 할당

전역 변수 x에 문자열 'xxx'를 할당할 때, 현재 실행 컨텍스트의 스코프 체인이 참조하고 있는 변수 객체를 선두(0)부터 검색하여 변수명에 해당하는 프로퍼티가 발견되면 값('xxx')을 할당한다.

(2) 함수 foo의 호출

전역 코드의 함수 foo가 실행되기 시작하면 새로운 함수 실행 컨텍스트가 생성된다.
전역 코드와 마찬가지로 1. 스코프 체인의 생성과 초기화 2. 변수 객체화 실행 3. this value 결정이 순차적으로 실행된다.
(단, 전역 코드의 룰이 아닌 함수 코드의 룰이 적용된다.)