[JavaScript] 실행 컨텍스트(Execution Context)가 무엇일까요?

 

[JavaScript] 실행 컨텍스트(Execution Context)가 무엇일까요?

들어가며 📖

자바스크립트를 이해하는 데 있어서 실행 컨텍스트(Execution Context)의 개념에 대해서 숙지하는 것은 중요합니다.

 

자바스크립트의 핵심 개념 중 하나로, 자바스크립트의 코드의 실행 순서와 방식을 결정하게 되죠.

실행 컨텍스트(Excution Context)란❓

실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.

자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다.

 

그래서 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 아래와 같은 동작을 수행합니다.

• 호이스팅(hoisting)
• 외부 환경 정보 구성
• this 값 설정

등등 이로 인해 다른 언어에서는 발견할 수 없는 특이한 형상들이 발생합니다.

동작 과정

동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성합니다.

이를 콜 스택(Call Stack)에 쌓아 올립니다.

가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다.

 

실행 컨텍스트를 구성할 수 있는 방법으로는

• 전역 공간
• eval() 함수
• 함수

등이 있습니다.

여기서 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것입니다.

var a = 1;
function outer() {
  function inner() {
    console.log(a); // undefined
    var a = 3;
  }
  inner();
  console.log(a); // 1
}
outer();
console.log(a); // 1

위 코드의 순서를 실행 컨텍스트 관점에서 보면 아래와 같습니다.

실행 컨텍스트와 콜 스택

1. 자바스크립트 코드 실행
2. 전역 컨텍스트를 콜 스택에 추가
3. 전역 컨텍스트와 관련된 코드들을 순차로 진행
4. outer에 대한 환경 정보 수집
5. outer 실행 컨텍스트 생성 후 콜 스택에 추가
6. 전역 컨텍스트와 관련된 코드의 실행 일시중단 (콜 스택 맨 위에 outer 실행 컨텍스트가 놓인 상태)
7. outer 함수 내부의 코드 순차로 실행
8. inner 실행 컨텍스트 생성 후 콜 스택에 추가
9. outer와 관련된 코드의 실행 일시중단 (콜 스택 맨 위에 inner 실행 컨텍스트가 놓인 상태)
10. inner 함수 내부의 코드 순차로 실행
11. 이후에 함수 실행이 종료되면 콜 스택에서 제거 되고 아래에 있던 실행 컨텍스트 이어서 실행

구성

실행 컨텍스트에 담기는 정보들은 아래와 같습니다.

VariableEnvironment

• 현재 컨텍스트 내의 식별자들에 대한 정보
• 외부 환경 정보
• 선언 시점의 LexicalEnvironment의 스냅샷 ➡️ 변경 사항은 반영되지 않음

VariableEnvironment에 담기는 내용은 LexicalEnvironment와 같습니다.

하지만, 최초 실행 시의 스냅샷을 유지한다는 차이가 있습니다.

즉, 실행 컨텍스트를 생성할 때 VariableEnvironment에 정보를 먼저 담습니다.

다음으로 이를 그대로 복사해서 LexicalEnvironment를 만듭니다.

 

이후에는 LexicalEnvironment를 주로 활용합니다.

LexicalEnvironment

• 초기에는 VaribaleEnvironment와 같음
• 이후 변경 사항이 실시간으로 반영됨

environmentRecord와 호이스팅

environmentRecord에는 매개변수의 이름, 함수 선언, 변수명 등이 담깁니다.

현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장됩니다.

식별자 정보란?
함수에 지정된 매개변수 식별자, 함수 자체, var로 선언된 변수의 식별자 등등 의미합니다.
즉, 컨텍스트 내부 전체를 처음부터 끝까지 순서대로 수집합니다.

이러한 과정으로 변수 정보를 수집하여 코드가 실행되기 전임에도 불구하고,

자바스크립트 엔진은 이미 해당 환경에 속한 코드의 변수명들을 모두 알게 된 상황입니다.

때문에 여기서 호이스팅(hoisting)이라는 개념이 등장합니다.

 

호이스팅에 관련해서는 해당 글에서 자세히 다룹니다.

스코프(Scope)와 outerEnvironmentReference

• 스코프(Scope)란 식별자에 대한 유효 범위입니다.
• 어떤 경계 A의 외부에서 선언한 변수는 A의 외부뿐 아니라 A의 내부에서도 접근이 가능합니다.
• 하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근이 가능합니다.

ES5까지의 자바스크립트는 전역공간을 제외하면 오직 함수에 의해서만 스코프가 생성됩니다.
ES6에서는 블록에 의해서도 스코프 경계가 발생합니다.
이 블록은 ES6에 등장한 let, const, class, strict mode에서의 함수 선언 등에 대해서만 범위로서 역할을 수행합니다.
그래서 둘을 구분하기 위해 함수 스코프, 블록 스코프라는 용어를 사용합니다.

스코프 체인(Scope Chain)

식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해 나가는 것입니다.

그리고 이를 가능하게 하는 것이 LexicalEnvironment의 두 번째 수집 자료인 outerEnvironmentReference입니다.

 

outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조합니다.

'선언하다'라는 행위가 실제로 일어날 수 있는 시점이란?
콜 스택 상에서 어떤 실행 컨텍스트가 활성화된 상태일 때뿐입니다.
즉, 모든 코드는 실행 컨텍스트가 활성화 상태일 때 실행되기 때문입니다.

예를 들어 A 함수 내부에 B 함수를 선언하고 다시 B 함수 내부에 C 함수를 선언한 경우

• 함수 C의 outerEnvironmentReference ➡️ 함수 B의 LexicalEnvironment
• 함수 B의 outerEnvironmentReference ➡️ 함수 A의 LexicalEnvironment
• 이처럼 outerEnvironmentReference는 연결리스트(linked list) 형태를 띱니다.

선언 시점의 LexicalEnvironment를 계속 찾아 올라가면 마지막에는 전역 컨텍스트의 LexicalEnvironment가 나옵니다.

 

그래서 각 outerEnvironmentReference는 오직 자신이 선언된 시점의 LexicalEnvironment만 참조하고 있습니다.

따라서, 가장 가까운 요소부터 차례대로 접근할 수 있고 다른 순서로 접근은 불가능합니다.

 

이러한 구조적 특성 덕분에 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능합니다.

// 시작: 전역 컨텍스트 활성화 (선언 시점이 없으므로 outerEnvironmentReference는 빈 값)
// enviromnetRecord에{a, outer} 식별자 저장
var a = 1; // 전역 스코프의 a에 1 할당
var outer = function () {
	// enviromnetRecord에 { inner } 식별자 저장
  var inner = function () {
  	// environmentRecord에 { a } 식별자 저장
    console.log(a); // environmentRecord에서 a를 검색 => 아직 값이 할당 되지 않음 undefined 출력
    var a = 3;
  }
  inner(); // inner 실행 컨텍스트 활성화 => 선언 당시인 outer의 LexicalEnvironment 참조복사 
  console.log(a); // enviromnetRecord에서 a를 찾아보니 없음 => outerEnvironmentReference에 있는 enviromnetRecord를 탐색 => 1 출력
}
outer(); // outer 실행 컨텍스트 활성화 => 선언 당시인 전역 컨텍스트의 LexicalEnvironment 참조복사 첫번째로 실행 컨텍스트의 이름, 두번째로 environmentRecord 객체(this: 전역 객체)
console.log(a);

ThisBinding

식별자가 바라봐야 할 대상 객체입니다.

즉, this로 지정된 객체가 저장됩니다.

실행 컨텍스트 활성화 당시에 this가 지정되지 않은 경우 this에는 전역 객체가 저장됩니다.

 

this에 대해서는 해당 글에서  자세히 다룹니다.

정리 📕

• 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
  • 전역 공간에서 자동으로 생성되는 전역 컨텍스트
  • eval()
  • 함수 실행에 의한 컨텍스트
• 실행 컨텍스트는 활성화되는 시점에 세 가지 정보를 수집
  • VariableEnvironment: : environmentRecord, outerEnvironmnetReference로 구성, 초기 상태를 유지함.
  • LexicalEnvironment: VariableEnvironment와 동일한 구성, 함수 실행 도중에 변경되는 사항이 즉시 반영
  • ThisBinding
• environmentRecord는 매개변수명, 변수의 식별자, 선언한 함수의 함수 명 등을 수집
• outerEnvironmnet는 직전 컨텍스트의 LexicalEnvironment 정보를 참조
• environmentRecord의 수집 과정을 추상화한 개념 ➡️ 호이스팅(hoisting)
• 스코프는 변수의 유효범위를 뜻함
  • 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexicalEnvironment를 탐색
  • 전역 컨텍스트의 LexicalEnvironment까지 도달해도 찾지 못했다면 undefined 반환
• 전역 변수 = 전역 컨텍스트의 LexicalEnvironment에 담긴 변수
• 지역 변수 = 함수에 의해 생성된 실행 컨텍스트의 변수
• this에는 실행 컨텍스트를 활성화하는 당시에 지정된 this가 저장됨

참고 문헌: 코어자바스크립트 - 실행 컨텍스트