[JS] 실행 컨텍스트

실행 컨텍스트란?

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념
즉, 실행 가능한 코드를 실행하기 위해 필요한 환경

자바스크립트 엔진은 코드를 실행하기 위해 여러가지 정보를 알고 있어야 한다.

• 변수(전역변수, 지역변수, 매개변수, 프로퍼티)
• 함수 선언
• 함수 유효 범위(scope)
• this

다음과 같은 코드가 있다고 하자.

var x = 'xxx';

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

이 때의 실행 컨텍스트는 다음과 같이 동작한다.

1. 컨트롤이 실행 가능한 코드로 진입하면 새로운 실행 컨텍스트 스택이 생긴다. LIFO 후입선출 구조이다.
2. 전역 코드로 진입하면 전역 실행 컨텍스트가 생성되고 스택에 쌓인다.
3. foo() 함수 호출을 만나면 foo() 실행 컨텍스트가 생성되고 스택에 쌓인다.
4. bar() 함수 호출을 만나면 bar() 실행 컨텍스트가 생성되고 스택에 쌓인다.
5. bar() 함수를 실행하고 실행 컨텍스트를 파기한다.
6. foo() 함수를 실행하고 실행 컨텍스트를 파기한다.
7. 애플리케이션이 종료될 때까지 전역 컨텍스트는 유지된다.

실행 컨텍스트의 구조

실행 컨텍스트는 추상적인 개념이지만 물리적으로는 객체의 형태를 가지며, 다음과 같은 프로퍼티를 가지고 있다.

EC
Variable Object (변수 객체)
Scope Chain (스코프 체인)
thisValue

① Variable Object (변수 객체)

함수 실행에 필요한 정보들을 담는 객체

• 변수
• 매개변수(parameter), 인수정보(arguments)
• 함수 선언(함수 표현식 제외)

변수 객체는 실행 컨텍스트의 프로퍼티이므로 값을 갖는데, 이 값은 다른 객체를 가리킨다. 전역 컨텍스트일 때와 함수 컨텍스트일 때 가리키는 객체가 다르다.

전역 컨텍스트일 경우

전역 컨텍스트의 Variable Object는 전역 객체(Global Object)를 가리킨다. 전역 객체는 유일하며 최상위에 위치한다. 전역 변수, 전역 함수를 프로퍼티로 갖는다.

함수 컨텍스트의 경우

함수 컨텍스트의 경우 Variable Object는 활성 객체(Activation Object)를 가리킨다. 전역 객체와 다른 점은, 매개변수와 인수정보를 배열 형태로 담고 있는 arguments 객체가 추가된다는 점이다.

② Scope Chain (스코프 체인)

스코프 체인은 일종의 리스트로, 해당 전역 또는 함수가 참조할 수 있는 전역 객체(GO) 혹은 활성 객체(AO)의 리스트를 가리킨다.

현재 실행 컨텍스트의 AO가 우선순위가 높고, 순차적으로 상위 컨텍스트의 활성 객체를 가리키며, 마지막은 GO를 가리킨다.

자바스크립트 엔진은 스코프 체인을 통해 렉시컬 스코프를 파악한다. 함수가 중첩 상태일 때, 하위 함수에서 상위함수의 스코프와 전역 스코프까지 참조할 수 있는데, 이는 스코프 체인을 통해 가능한 것이다.

먼저, 실행 함수의 AO에서 변수를 검색해보고 현재 실행 함수 내에 변수가 없으면 상위함수의 AO에서 검색해보고, 없으면 또 상위 함수의 AO 또는 GO를 검색한다. 그렇게 순차적으로 검색해도 변수를 찾을 수 없으면 Reference Error를 뱉게 된다.

스코프 체인은 변수를 검색하는 매커니즘이다. 변수가 아닌 객체의 프로퍼티를 검색하는 것은 프로토타입 체인(prototype chain)이다.

③ this

this는 함수 호출 방식에 따라 결정된다.

1. 함수 호출
2. 메소드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

[JS] 함수 호출 방식에 따른 this 바인딩

정리

실행 컨텍스트는 코드를 실행하기 위해 필요한 정보를 담고 있는 환경이다. 실행 컨텍스트는 변수 객체, 스코프 체인, this라는 프로퍼티를 가지고 있다.

변수 객체는 함수 실행에 필요한 정보를 담고 있는 객체를 가리킨다. 변수 객체는 전역 컨텍스트일 때는 전역 객체를 가리키고, 함수 컨텍스트일 때는 활성 객체를 가리킨다.

스코프 체인은 해당 함수가 참조할 수 있는 전역 객체와 활성 객체의 리스트를 가리킨다. 스코프 체인을 따라 변수를 검색할 수 있다. 이를 통해서 엔진이 렉시컬 스코프를 파악할 수 있다.

this 값은 함수가 어떤 방식으로 호출되느냐에 따라서 값이 동적으로 할당된다.

참조

https://poiemaweb.com/js-execution-context

공부한 내용을 스스로 정리한 포스트입니다. 잘못된 점이 있다면 댓글 부탁드립니다 :)