TIL

Javascript "실행컨텍스트(콜 스택)"

dev_gggimmmin 2024. 1. 8. 21:42
728x90

 

 

자바스크립트의 실행 컨텍스트 는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.

자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 다음과 같은 일을 한다.

 


1. 선언된 변수를 위로 끌어올린다. = 호이스팅 (hoisting)
2. 외부 환경 정보를 구성한다.
3. this 값을 설정한다.

 

 

이런 현상들 때문에 JS에서는 다른 언어랑은 다른 특징들이 나타난다.

 

 

1. 실행 컨텍스트란 ?

 

 

(이미지 출처 : https://velog.io/@leejuhwan/스택STACK과-큐QUEUE )

 

스택은 LIFO(Last in, first out), 큐는 FIFO(First in, first out)이다.

 

✅ 콜스택 (call stack)

실행 컨텍스트란 실행할 코드에 제공할 환경정보들을 모아놓은 객체이다.

그 객체에서 코드를 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고,

이것들을 위 스택의 그림처럼 콜스택에 쌓아올린다.

가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장한다.

 

 

🚩 컨텍스트의 구성

 

a. 구성방법

 

i. 전역공간

ii. eval( ) 함수

iii. 함수 (우리가 흔히 실행컨텍스트를 구성하는 방법)

 

 

b. 실행컨텍스트 구성 예시 코드

 

// ---- 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);

 

 

콜 스택에 쌓이는 실행컨텍스트에 의한 순서는 다음과 같다.

 

코드실행 -> 전역(in) -> 전역(중단) + outer(in) -> outer(중단) + inner(in) -> inner(out) + outer(재개) ->
outer(out)  + 전역(재개) -> 전역(out) -> 코드종료

 

 

이해하기 어렵다면 더 쉬운 예제로 생각해보자.

 

function apple() {
	console.log("apple");
    }
    
function orange() {
	console.log("orange");
    }
    
function melon() {
    apple();
    console.log("melon");
    orange();
    }
    
melon();

 

위 코드의 실행 순서를 나열해보겠다.

 

1.  melon 실행 함수( melon ( ) )를 만나 호출할 때까지 모든 함수를 지나간다.

2. melon 함수를 호출한다.

3. melon 함수를 호출하여 생성 된 실행 컨텍스트를 콜 스택에 추가한다.

4. melon 함수 내의 모든 코드를 읽기 시작한다.

5. apple ( ) 함수를 만나 apple 함수를 호출한다.

6. apple 함수를 호출하여 생성 된 실행 컨텍스트를 콜 스택에 추가한다.

7. apple 함수 내의 모든 코드를 읽기 시작한다. // apple 출력

8. apple 함수 내의 모든 코드를 읽었다면 해당 실행 컨텍스트를 제거한다.

9. apple 함수를 호출한 melon 함수로 돌아와 나머지를 실행한다. // melon 출력 후, orange 함수 호출

10. orange 함수도 5 ~ 9번과 마찬가지로 실행된다.

11. melon 함수 내의 모든 코드를 읽었으므로 melon 함수가 콜 스택에서 제거된다.

 

결과는 apple, melon, orange 순으로 출력 될 것이다.

 

 

결국은 특정 실행 컨텍스트가 생성되는 (활성화되는) 시점이 콜 스택의 맨위에 쌓이는 순간을 의미한다.

현재 실행할 코드에 해당 실행 컨텍스트가 관여하게 되는 시점을 의미한다고 받아들이면 정확하다.

 

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

 

실행 컨텍스트 객체에는 3가지의 정보가 담겨있다.

 

1. Variable Environment

a. 현재 컨텍스트 내의 식별자 정보 (=record) 를 가지고 있다.
    i. var a = 3
    ii. 위의 경우 var a 를 의미

b. 외부 환경 정보 (=outer)를 가지고 있다.
c. 선언 시점 Lexical Environment의 snapshot을 가지고 있다. 


2. Lexical Environment

a. Variable Environment와 동일하지만, 변경사항을 실시간으로 반영한다.

3. ThisBinding

a. this 식별자가 바라봐야할 객체

 

 

다음 복습시간에는 이해하기 어려웠던 개념인 

Variable Environment 와 Lexical Environment 의 개념에 대해서 다뤄봐야겠다.

728x90