5. 실행 컨텍스트와 클로저 #2 실행 컨텍스트 생성 과정

이전글

https://yonghwankim-dev.tistory.com/161

5. 실행 컨텍스트와 클로저 #1 실행 컨텍스트 개념

 

본 글은 INSIDE JAVASCRIPT 도서의 내용을 복습하기 위해 작성된 글입니다.

 

요약 및 정리

• 실행 컨텍스트(Execution Context) 생성 과정
  1. 변수 객체 생성 : 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러 가지 정보를 담을 객체 생성
  2. arguments 객체 생성 : 변수 객체에 arguments 객체를 생성하여 저장, arguments 객체는 인자 정보를 저장
  3. 스코프 정보 생성 : 현재 컨텍스트의 유효 범위를 나타내는 스코프 정보 생성
  4. 변수 생성 : 현재 실행 컨텍스트 내부에서 사용되는 지역 변수 생성
  5. this 바인딩 : this 바인딩 수행, this가 참조하는 객체가 없으면 전역 객체(window)를 참조함
  6. 코드 실행 : 코드에 있는 여러가지 표현식 실행, 변수의 초기화 및 연산, 또다른 함수 실행이 수행됨

 

개요

실행 컨텍스트의 생성 과정을 소개합니다. 본 글에서는 아래의 중요 개념을 소개합니다.

• 변수 객체
• 스코프 체인

1. 변수 객체 생성

실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러 가지 정보를 담을 객체를 생성합니다. 이를 변수 객체라고 합니다. 변수 객체에 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트로 접근 가능하게 되어 있습니다.

2. arguments 객체 생성

다음 단계에서 변수 객체에 arguments 객체를 생성합니다. arguments 객체는 인자를 저장하는 객체입니다. 변수 객체는 arguments 프로퍼티로 arguments 객체를 참조합니다. 예를 들어 execute() 함수의 param1과 param2가 들어왔을 경우 아래의 변수 객체의 상태는 아래 그림과 같습니다.

3. 스코프 정보 생성

현재 실행 컨텍스트의 유효 범위를 나타내는 스코프 정보를 생성합니다. 이 스코프 정보는 현재 실행 중인 실행 컨텍스트 안에서 연결 리스트와 유사한 형식으로 생성됩니다. 현재 컨텍스트에서 특정 변수에 접근해야 할 경우, 이 리스트를 활용한다. 이 리스트로 현재 컨텍스트의 변수뿐 아니라, 상위 실행 컨텍스트의 변수도 접근이 가능합니다.

 

이 리스트에서 찾지 못한 변수는 정의되지 않은 변수에 접근하는 것으로 판단하여 에러를 검출합니다. 이 리스트를 스코프 체인이라고 하는데, [[scope]] 프로퍼티로 참조됩니다.

4. 변수 생성

현재 실행 컨텍스트 내부에서 사용되는 지역 변수의 생성이 수행됩니다. 변수 객체 안에서 호출된 함수 인자는 각각의 프로퍼티가 만들어지고 그 값이 할당된다. 만약 값이 넘겨지지 않았다면 undefined가 할당됩니다. 여기서 주의할 점은 이 과정에서는 변수나 내부 함수를 단지 메모리에 생성하고, 초기화는 각 변수나 함수에 해당하는 표현식이 실행되기 전까지는 이루어지지 않습니다. 표현식의 실행은 변수 객체 생성이 다 이루어진 후 시작됩니다.

 

 

5. this 바인딩

마지막 단계에서는 this 키워드를 사용하는 값이 할당됩니다. this가 참조하는 객체가 없으면 전역 객체(window)를 가리킵니다.

6. 코드 실행

하나의 실행 컨텍스트가 생성되고, 변수 객체가 만들어진 후에, 코드에 있는 여러 가지 표현식 실행이 수행됩니다. 변수의 초기화 및 연산, 또 다른 함수 실행 등이 수행됩니다. 위의 그림에서 undefined가 할당된 변수 a, b에도 이 과정에서 1, 2의 값이 할당됩니다.

 

전역 실행 컨텍스트는 일반적인 실행 컨텍스트와는 달리 arguments 객체가 없고 전역 객체 하나만을 포함하는 스코프 체인이 있습니다. 실행 컨텍스트가 형성되는 세 가지 중에 하나로서 전역 코드가 존재합니다. 이 전역 코드가 실행될때 생성되는 컨텍스트가 전역 실행 컨텍스트입니다. 그리고 전역 실행 컨텍스트의 변수 객체가 전역 객체(window)로 사용됩니다.

 

References

source code : https://github.com/yonghwankim-dev/javascript_study
INSIDE JAVASCRIPT 한빛미디어, 송형주 저