↪️ 실행 컨텍스트 [JS]

hoheesu·2024년 2월 8일

JavaScript

목록 보기

4/8

실행 컨텍스트

☀️ 실행 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아 놓은 객체이다.
실행 컨텍스트를 이해하기 위해서는 콜 스택에 대한 이해가 필요하다.

📚 스택 & 큐

스택과 큐는 이해하기 쉬운 개념이다 😆

스택(Stack)은 LIFO(Last In First Out) 데이터 구조를 가진다. 즉, 스택에 마지막으로 추가된 요소가 가장 먼저 제거된다. 우리가 흔히 보는 프링글스와 같다.
프링글스통에 가장먼저 들어간 과자를 우리가 가장 마지막에 먹게되는 원리이다.

반대 의미인 큐(Queue)는 FIFO(First In First Out) 데이터 구조를 가진다. 가장 인기있는 게임인 롤에서 이 큐를 찾아볼 수 있다. 우리가 흔히 "롤 큐돌리자" 라고 할때 큐가 데이터 구조의 큐이다. 먼저 게임시작을 누른 사람이 먼저 게임을 할 수 있는 원리이다.

📞 콜스택

동일 환경에 있는 코드를 실행할 때 필요한 환경정보들을 모아 컨텍스트를 구성하고 이것을 콜스택에 쌓아 올린다.

// ---- 1번
let a = 1;
function outer() {
	function inner() {
		let a = 3;
	}
	inner(); // ---- 2번
	console.log(a);
}
outer(); // ---- 3번
console.log(a);

위 코드는 실행컨텍스트 구성 예시 코드이다. 이 코드에서 실행컨텍스트 구성 순서는 다음과 같다.

코드실행 ➡️ 전역(in)
➡️ 전역(pause) + outer(in)
➡️ outer(pause) + inner(in)
➡️ inner(out) + outer(재개)
➡️ outer(out) + 전역(재개)
➡️ 전역(out) ➡️ 코드종료

📦 실행컨텍스트 객체의 실체

각각의 실행컨텍스트는 환경정보들을 객체로 보관한 것이라고 했었는데 이 객체에는 크게 세가지가 들어가는데 이는 다음과 같다

1. VariableEnvironment
1. LexicalEnvironment
1. TishBinding

🟰 VE & LE

✅ VE와 LE는 거의 동일하지만 변경사항을 실시간으로 반영하는 것에 따라 나뉘어진다.

VE & LE는 record와 outer를 모두 갖고있다.

현재 컨텍스트내의 식별자정보 (= record)
💡 식별자정보는 let a = 3라는 변수를 선언한경우 let a를 의미한다.
외부 환경정보(= outer)

VE는 선언시점의 스냅샷을 유지한다. ( 변경하지 않는 정보 )
LE는 변경사항을 스냅샷을 유지하지 않는다. (실시간으로 변경사항을 계속해서 반영한다.

✅ 결국, 실행 컨텍스트를 생성할 때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사하여 LE를 만들고 이후에는 주로 LE를 활용한다.

⭐️ LE environmentRocord(=record)와 호이스팅

✅ 현재 컨텍스트와 관련된 코드의 식별자 정보들이 저장된다(기록된다). = record
✅ 수집 대상 정보: 함수에 지정된 매개변수 식별자, 함수자체, let으로 선언된 변수 식별자 등
✅ 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집
❗️ 다만 순서대로 수집만 할 뿐 코드가 실행되는 것은 아니다.

🏗️ 호이스팅

변수정보 수집을 모두 마쳤더라도 아직 실행컨텍스트가 관여할 코드는 실행 전의 상태이다. ➡️ JS엔진은 코드 실행 전 이미 모든 변수정보를 알고 있는것이다.
변수정보 수집과정을 이해하기 쉽게 설명한 가상개념이다.

🖇️ 실행컨텍스트 관점에서의 스코프와 스코프 체인

스코프란 식별자에 대한 유효범위를 의미한다. 스코프 체인은 식별자의 유효범위를 안에서부터 바깥으로 차례로 검사해 나가는 것을 말한다.

지금까지는 VE&LE의 구성요소 record와 uter중 record에대해 설명했다. 스코프 체인은 outer다. outer의 역할을 한 마디로 정의하자면
스코프체인이 가능토록 하는것(외부 환경의 참조정보)라고 할 수 있다.

스코프체인
outer는 현재 호출된 함수가 선언될 당시의 LE를 참조한다.
🗨️ 예를 들어, < 'a함수 내부에 b함수를 선언 ➡️ b함수 내부에 c함수 선언 > 을 한경우 식별자의 유효범위를 차례대로 타고 올라가다 보면 전역 컨텍스트의 LE를 참조 할 수 있게 된다.
💡항상 outer는 오직 자신이 선언된 시점의 LE를 참조하고 있으므로 가장 가까운 요소부터 차례대로 접근이 가능하다. 즉, 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에게만 접근이 가능하다.