실행 컨텍스트(Execution context)

실행 컨텍스트 정리 중 일단 끄적이기

실행컨텍스트는 scope, hoisting, this, function, closure 등의 동작원리를 담고있는 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 실행 컨텍스트를 바로 이해하지 못하면 코드 독해가 어려워지며 디버깅도 매우 곤란해 질 것이다.

 

실행 컨텍스트란?

실행 가능한 코드를 형상화하고 구분하는 추상적인 개념인데, 이해하기 쉽게 말하자면 실행 가능한 코드가 실행되기 위해 필요한 환경으로 말할 수 있습니다.

 

이것도 역시 코드를 먼저 보겠습니다.

function a() {
    console.log('a');
}
 
function b() {
    console.log('b');
    a();
}
 
function c() {
    console.log('c');
    b();
}
 
c();

 

위의 코드를 실행컨텍스트로 표현하자면 다음과 같습니다.

(1) 브라우저에서 자바스크립트 코드를 읽은 뒤에 전역 컨텍스트가 생성됩니다.

(2) c 함수를 실행할 때, 2번 그림처럼 c 컨텍스트가 생성되고 컨텍스트 스택에 채워집니다. 그리고 console.log('c') 를 실행합니다.

(3) , (4) 도 동일하게 b 함수가 호출되면 컨텍스트가 생성되고 console.log('b')를 수행합니다. 그리고 a 함수가 호출되며, a 컨텍스트 가 생성되고 스택에 채워지며, console.log('a') 를 수행합니다.

(5) a 컨텍스트는 나머지 수행할 내용이 없으므로, a 컨텍스트가 반환됩니다.

(5) ~ (7) 마찬가지로 b 컨텍스트, c 컨텍스트도 마찬가지로 반환됩니다.

(8) 마지막으로 브라우저가 종료되거나 페이지가 닫힐 때 전역 컨텍스트도 스택에서 반환되게 됩니다.

 

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

실행 컨텍스트는 아래 3가지 객체를 내장하고 있다.

 

Variable Object (VO)

=> 실행에 필요한 여러 정보(아래 3가지)들을 담을 객체이며, 실행 컨텍스트가 생성될 때, 자바스크립트 엔진이 이를 생성한다. VO 객체는 코드가 실행될 때 엔진에 의해 참조되며 코드에서는 접근불가하다.

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

 

Scope chain

일종의 리스트형태이며, 전역 객체와 중첩된 함수의 스코프 레퍼런스를 차례대로 저장하고 있다. 다시말하면, 참조할 수 있는 변수나 함수 선언 등의 정보가 담긴 전역객체(GO) 또는 활성객체(AO)를 가르킨다.

(쉽게 말하자면, Scope 란 변수와 함수들의 유효 범위인데, 이들이 chain 형식으로 이어져있는 것이다.)

함수가 실행되는 순간 실행 컨텍스트가 생성이되고, 이 실행 컨텍스트는 실행 된 함수의 [[Scope]] property 를 기반으로 새로운 scope chain 을 만든다.

 

현재 실행 컨텍스트의 활성 객체(AO)를 선두로 하여 순차적으로 상위 컨텍스트의 활성 객체(AO)를 가리키며 마지막 리스트는 전역 객체(GO)를 가리킨다.

 

 

 

 

 

 

VO 객체는 전역 코드 실행 시 생성되는 전역 컨텍스트의 경우와 함수를 실행할 때 생성되는 함수 컨텍스트의 경우 가르키는 객체가 다르다.

 

전역 컨텍스트

전역 컨텍스트의 VO 는 모든 전역변수, 전역 함수등을 포함하는 전역 객체(Global Object / GO)를 가리킨다. 전역 객체는 전역에 선언된 전역 변수와 전역 함수를 프로퍼티로 소유한다.

 

함수 컨텍스트

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

 

 

 

 

참조

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