실행 컨텍스트

mandoo·2022년 10월 28일
0

JavaScript

목록 보기
5/7

1. 실행 컨텍스트

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작 원리를 담고 있는 JavaScript의 핵심 원리이다.
실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이라고 정의된다.
즉 실행 컨텍스트는 실행 가능한 코드들이 실행되기 위한 환경이라 볼 수 있다.

JavaScript 엔진은 코드를 실행하기 위해 실행에 필요한 아래의 정보를 알고 있어야 한다.

  • 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효범위(Scope)
  • this

이와 같이 실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 실행 컨텍스트를 물리적 객체의 형태로 관리한다.

var x = 1;

function outer () {
  var y = 2;

  function inner () {
    var z = 3;
    console.log(x + y + z);
  }
  inner();
}
outer();

위 코드를 실행하면 아래와 같이 실행 컨텍스트 스택(Stack)이 생성하고 소멸한다.
현재 실행 중인 컨텍스트에서 이 컨텍스트와 관련 없는 코드(예를 들어 다른 함수)가 실행되면 새로운 컨텍스트가 생성된다. 이 컨텍스트는 스택에 쌓이게 되고 컨트롤(제어권)이 이동한다.

  1. 컨트롤이 이동하면 새로운 실행 컨텍스트 스택이 생성된다. 스택은 LIFO(Last in First Out, 후입 선출)의 구조를 가진다.
  2. script요소를 처음 만나는 시점에서 전역 실행 컨텍스트가 생성되고 실행 컨텍스트에 쌓인다. 전역 실행 컨텍스트는 애플리케이션이 종료될 때(웹 페이지에서 나가거나 브라우저를 닫을 때)까지 유지된다.
  3. 함수를 호출하면 해당 함수의 실행 컨텍스트 스택이 생성되며 직전에 실행된 코드 블록의 실행 컨텍스트 스택 위에 쌓인다.
  4. 함수 실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행 컨텍스트에 컨트롤을 반환한다.

2. 실행 컨텍스트의 3가지 객체

실행 컨텍스트는 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념이지만 물리적으로는 객체의 형태를 가지며 아래의 3가지 프로퍼티를 소유한다.

  • Variable Object(VO / 변수 객체)
  • Scope Chain(SC)
  • this value

1) Variable Object(VO / 변수 객체)

실행 컨텍스트가 생성되면 자바스크립트 엔진은 실행에 필요한 여러 정보들을 담을 객체를 생성한다. 이를 Variable Object(VO / 변수 객체)라고 한다.
Variable Object는 아래의 정보를 담는 객체이다.

  • 변수
  • 매개변수와 인자
  • 함수 선언(함수 표현식 제외)

전역 컨텍스트의 경우

Variable Object는 유일하며 최상위에 위치하고 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체(Global Object / GO)를 가리킨다. 전역 객체는 전역에 선언된 전역 변수와 전역 함수를 프로퍼티로 소유한다.

함수 컨텍스트의 경우

Variable Object는 Activation Object(AO / 활성 객체)를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 객체인 arguments object가 추가된다.

2) Scope Chain(SC)

스코프 체인(Scope Chain)은 일종의 리스트로서 현재 활성화된 실행 컨텍스트(AO)의 변수객체부터 전역 실행 컨텍스트의 변수 객체(GO)를 가리키는 형태로 구성된다.

JavaScript 엔진은 스코프 체인을 통해 렉시컬 스코프를 파악한다.
함수가 중첩되어 있으면 중첩될 때마다 부모 함수의 Scope가 자식 함수의 스코프 체인에 포함된다. 함수 실행중에 변수를 만나면 그 변수를 우선 현재 Scope, 즉 AO에서 검색해보고, 만약 검색에 실패하면 스코프 체인에 담겨진 순서대로 그 검색을 이어가게 되는 것이다.

JavaScript 엔진이 변수를 찾는(look-up) 과정은 스코프 체인을 통해 이루어지며 이는 함수가 어떻게 호출되던 오직 선언에만 의존한다는 것을 알 수 있다.

3) this value

this 프로퍼티에는 this 값이 할당된다. this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.

3. 참고 문서

poiemaweb: JavaScript 실행 컨텍스트와 자바스크립트의 동작 원리

profile
매일 조금씩이라도 꾸준히

0개의 댓글