자바스크립트의 심장, 실행 컨텍스트

김재만·2022년 4월 23일
0

실행 컨텍스트

실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 실행 컨텍스트는 (1)전역코드로의 진입, (2)전역코드의 함수 실행, (3)함수블록코드의 함수 실행 시 일어난다. (1)의 경우 전역 컨텍스트를 (2)/(3)의 경우 함수 컨텍스트를 생성한다.

코드가 실행되면 실행 컨텍스트 스택이 생성되고 소멸한다. 스택이 생성된 최초에는 전역 컨텍스트가 담기고, 새로운 함수가 실행됨에 따라 생성된 함수 컨텍스트가 쌓인다. 새로운 컨텍스트가 쌓이면 해당 컨텍스트로 제어권이 이동된다. 함수가 종료되면 해당하는 함수 컨텍스트를 제거(pop)하고 제어권 역시 다음 컨텍스트로 이동한다.


실행 컨텍스트의 구성

실행 컨텍스트는 아래의 3가지 값을 갖는다.

1. 변수 객체(Variable Object)

자바스크립트 엔진이 코드 실행에 필요한 정보를 담은 객체이다. 변수, 매개변수, 인수정보, 함수선언을 담고 있다.(함수 표현식은 제외) 전역 컨텍스트의 경우, 변수 객체가 모든 전역 변수와 전역 함수를 포함하는 전역 객체(GO, Global Object)를 가리킨다. 함수 컨텍스트의 경우 지역 변수와 내부 함수, 매개변수와 인수들의 정보를 담고 있는 배열인 arguments object를 포함하는 활성 객체(AO, Activation Object)를 가리킨다.

2. 스코프 체인(Scope Chain)

전역 객체, 활성 객체를 담고 있는 리스트이다. 현재 실행 중인 컨텍스트의 변수 객체를 0번 째로, 상위 컨텍스트의 객체를 차례로 담고 있다.(마지막은 전역객체) 변수 중 활성 객체의 변수가 아닌 것을 검색하는 매커니즘으로, 함수 내부에서 상위 함수의 스코프와 전역 스코프 참조를 가능케 한다. 자바스크립트 엔진은 스코프 체인을 통해 렉시컬 스코프를 파악한다.

** 렉시컬 스코프 : 함수 선언 위치에 따라 결정되는 스코프

3. this 값

this 값이 할당된다. this는 함수 호출 패턴에 의해 결정된다.


실행 컨텍스트의 생성 과정

  1. 전역코드 진입 과정에서 전역객체 생성 : 전역 객체는 DOM, BOM, 내장 객체 등을 포함

  2. 전역 코드로 컨트롤이 진입하면서 전역 실행 컨텍스트 생성
    1) 스코프 체인 생성과 초기화 : 전역 객체가 첫 번째 요소로 담김

    2) 변수 객체화 실행 : 전역 객체를 가리킴

    • (0) 매개변수가 변수 객체의 내부 속성의 키, 인수가 값으로 설정된다. 함수 코드인 경우에 우선 실행된다.
    • (1) 함수 호이스팅 : 함수명을 변수 객체의 키로, 함수 객체가 밸류로 설정된다.
    • (2) 변수 호이스팅 : 변수 명을 변수 객체의 키로, 초기 값(var의 기본값은 undefined)으로 설정된다.

    3) this 값 결정 : this값이 결정되기 이전에 전역 객체를 가리키고 있다가 함수 호출 패턴에 따라 this 값이 결정된다. this 값은 하위 실행 컨텍스트가 생성된 이후에 결정된다.(3. 함수와 변수의 선언 처리 이후 진행됨)

    ** 전역 실행 컨텍스트는 전역 객체, 스코프체인, this가 가리키는 값이 전부 전역 객체이다.

  3. 함수와 변수의 선언 처리

    3-1. 함수 선언 처리가 실행된다.

    해당 실행 컨텍스트의 변수 객체에 "함수명:함수객체" 형태로 저장된다. 함수 객체는 [[Scopes]] 객체를 내부 속성으로 가지며, 함수 객체가 실행되는 환경을 값으로 갖는다. 이는 해당 실행 컨텍스트의 스코프 체인이 참조한 객체에 해당한다.

    함수 호이스팅

    해당 함수는 변수 객체에 등록되었으므로, 즉시 호출할 수 있다. 이러한 현상을 함수 호이스팅이라 한다.

    클로저

    함수의 [[Scopes]] 내부 속성은 함수의 실행 환경과 상위 함수의 실행 환경, 전역 객체를 가리킨다. 외부 함수의 실행 컨텍스트가 소멸해도 해당 값을 참조할 수 있는데, 이러한 특성을 클로저, 이러한 함수를 클로저 함수라고 한다.

    3-2. 변수 선언 처리가 실행된다.

  • 선언 단계 : 변수 객체에 변수를 등록, 스코프가 참조할 수 있도록 한다.
  • 초기화 단계 : 변수 객체에 등록된 변수를 메모리에 할당하며, 변수를 초기화(var의 기본값은 undefined)
  • 할당 단계 : 변수에 실제값을 할당한다.

    변수 호이스팅

    var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어지므로, 실행 컨텍스트 생성 과정에서 바로 변수 객체에 등록된다. 따라서 변수 선언문에 도달하기 이전(할당 단계 이전)에 접근하더라도 에러가 발생하지 않는다. 이러한 현상을 변수 호이스팅이라 한다.

  1. 전역코드의 실행
    코드를 상단부터 차례로 실행한다. 아래의 단계들이 실행된다.
  • var로 선언한 변수의 할당 단계, let/const로 선언한 변수의 초기화, 할당단계
  • 함수의 실행
    1) 함수 컨텍스트 생성
          1. 의 과정을 함수 스코프, 활성 객체로 진행한다.
    • 함수 내부에 없는 변수는 스코프 체인에 따라 상위 변수 객체에서 참조한다.
    • 매개 변수와 인수 값을 변수 객체의 내부 속성으로 등록된다.
    2) 함수 코드 실행

마무리

용의 심장을 도려냈다.

잠고 문서

mdn - this
Poiemaweb - Execution Context

profile
듣는 것을 좋아하는 개발자입니다

0개의 댓글