[javascript] 자바스크립트에서의 실행컨텍스트 (스택/큐)

실행 컨텍스트란?

javascript 코드가 실행되기 위해 필요한 환경을 제공하는 개념으로, 실행할 코드에 제공할 환경정보들을 모아놓은 객체라고 볼 수 있다.

실행 컨텍스트는 코드가 실행되는 동안 변수,함수 선언,스코프 등을 관리하고 실행 순서를 추적

각각의 코드 블록이 실행될때 마다(전역코드,함수 등) 해당 코드의 실행 컨텍스트가 생성됨.

 

스택 (Stack) :

-후입선출(LIFO, Last-In-First-Out) 구조, 마지막으로 삽입된 데이터가 가장 먼저 삭제됨.
-삽입 작업은 "push", 삭제 작업은 "pop"
-스택은 함수 호출과 관련된 실행 컨텍스트 관리, 브라우저의 방문 기록(back button), 실행 취소/다시 실행 등에 사용됨
-자바스크립트에서는 함수 호출 시 호출 스택을 사용하여 함수의 실행 컨텍스트를 관리함.

 

큐 (Queue) :

-선입선출(FIFO, First-In-First-Out) 구조, 가장 먼저 삽입된 데이터가 가장 먼저 삭제됨.
-삽입 작업은 "enqueue", 삭제 작업은 "dequeue"
-큐는 작업 대기열, 이벤트 처리, 메시지 큐 등에 사용됨.
-자바스크립트에서는 이벤트 루프(Event Loop)를 통해 비동기적인 이벤트 처리와 콜백 함수 실행을 관리함.

---

자바스크립트에서의 실행 컨텍스트

 

자바스크립트의 실행 컨텍스트는 스택(Stack) 형태로 관리
함수 호출 시 해당 함수의 실행 컨텍스트가 스택에 추가되고, 함수 실행이 완료되면 해당 컨텍스트가 스택에서 제거됨.
이는 함수 호출과 관련된 실행 순서를 지정한다.
자바스크립트의 이벤트 루프(Event Loop)는 큐(Queue)를 사용하여 비동기적인 이벤트 처리와 콜백 함수 실행을 관리함.
비동기적인 이벤트는 큐에 순차적으로 삽입되고, 이벤트 루프는 큐에서 이벤트를 꺼내어 처리한다.
이를 통해 이벤트 처리의 순서를 보장하고, 비동기 작업을 처리할 수 있다.

 

 

기본적인 방식 (콜 스택)

-콜 스택에 쌓이는 실행컨텍스트에 의해 순서가 보장됨

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

---

비동기 처리를 큐를 통해 처리하는 예시

console.log("Start");

setTimeout(function () {
  console.log("Inside setTimeout");
}, 2000);

console.log("End");

setTimeout 함수가 호출되어 2초 후에 콜백 함수가 실행되도록 예약됨. => 이때, 콜백 함수는 큐에 삽입

이벤트 루프는 실행 컨텍스트 스택(Stack)이 비어있을 때, 큐에서 이벤트 또는 콜백 함수를 꺼내어 실행함.
위의 코드에서 setTimeout 함수는 비동기적인 동작이므로 콜백 함수가 실행되기 위해 기다리는 동안 실행 컨텍스트 스택은 비어있음.
2초 후에 타이머 이벤트가 발생하면 해당 이벤트는 큐에 삽입됨.
이벤트 루프는 실행 컨텍스트 스택이 비어있는 상태에서 큐에 이벤트가 있는지 확인하고, 콜백 함수를 꺼내어 실행함.
따라서 2초 후에 "Inside setTimeout"이 출력!

---

⭐⭐ 실행 컨텍스트 객체의 실체 (=담기는 정보)

 

1. VariableEnvironment (VE)

-실행 컨텍스트 내에서 현재의 변수와 함수 선언에 대한 식별자 정보를 저장하는 공간

1. var a = 3
2. 위의 경우, var a를 의미

-변수와 함수 선언은 해당 환경 내에서 식별자와 연결
-선언 시점의 LexicalEnvironment의 "snapshot"이 포함
-또한, 외부 환경 정보(outer)를 포함하여 해당 컨텍스트의 외부스코프와의 연결 유지

 

2. LexicalEnvironment (LE)

-VariableEnvironment와 유사한 역할, but 변경 사항을 실시간으로 반영
-실행 컨텍스트 내에서 변수, 함수 선언 및 블록 스코프에 대한 식별자 정보를 동적으로 관리
-변수와 함수 선언은 해당 환경 내에서 식별자와 연결
-VariableEnvironment의 스냅샷이 아닌, 실제 현재의 상태를 반영

 

**VE / LE 는 식별자 정보(=record)와 외부환경 정보(=outer)를 가지고 있음

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

 

3. ThisBinding

-ThisBinding은 this 식별자가 참조해야 할 객체를 지정
-this는 실행 컨텍스트를 생성한 호출부에 의해 결정됨.
t-his는 함수 호출 방식에 따라 다른 객체를 참조할 수 있으며, 실행 컨텍스트 내에서 this의 값이 지정된다.

 

 

---

⭐ record(식별자 정보) 수집과정 =  hoisting

* 컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 식별자 정보만을 수집함, 하지만 코드가 실행되지는 않습니다만..

우리 눈에는 에러나 undefined으로 보이니깐요.. 결국 가상개념이라고 볼 수 있다.

 

관련 내용 정리해둔 글 !!!!! 😵‍💫 

https://vc-xz.tistory.com/123

[javascript] var, const, let 등 변수 다루기 , TDZ