[ JS 33 Concept ] 1. 호출스택

[ Types of Execution Context ] 

excution context는 자바스크립트 코드가 평가되고 실행되는 환경입니다.

즉, 자바스크립트 코드는 excution context 내에서 실행됩니다. 

 

Global Execution Context 

default 실행 컨텍스트로 함수 안에 없는 코드의 경우 해당 excution context에서 실행됩니다.

여기서는 두 가지의 작업이 실행되는데, 첫번째는 전역 개체( window object )를 만들고,

이 값을 전역 개체와 동일하게 설정합니다. 

프로그램에는 하나의 전역 실행 컨텍스트만 존재합니다. 

 

Functional Execution Context

함수가 호출될 때마다, 해당 함수에 대한 새로운 excution context이 만들어집니다. 

각 함수가 가지는 excution context는 해당 함수가 호출되거나 호출할 때 만들어집니다. 

 

Eval Function Execution Context 

eval 함수 내에서 실행되는 코드도 자신만의 excution context를 가집니다.

그렇지만, eval 함수의 경우 eval 함수 자체가 자바스크립트 코드 내에서 잘 사용되지는 않습니다.

[ 호출스택 ]

Execution stack ( calling stack ) 은 LIFO 구조를 가지는 스택 구조입니다. 이는 코드 실행 중에 생성되는 모든 execution context 를 저장합니다. 자바스크립트 엔진이 처음에 script 를 보면  전역실행컨텍스트를 만들고 이를 현재 Execution stack에 push 합니다. 이후에 자바스크립트 엔진이 함수 호출을 만날 때 마다 해당 함수를 위한 새로운 execution context ( 실행 컨텍스트 )를 생성하고 이를 Execution stack의 상단에 push합니다.
이 때, 자바스크립트 엔진은 Execution stack에서 가장 위의 함수를 수행합니다. 함수가 모두 실행되고 나면, Execution stack에서 해당 함수의 실행 컨텍스트는 Execution stack에서 pop 되고, 컨트롤이 아래로 이동하게 됩니다. 

[ 코드로 살펴보기 ] 

let a = 'Hello World!';

function first() {
  console.log('first');
  second();
  console.log('Again first');
}

function second() {
  console.log('second');
}

first();
console.log('Inside Global Execution Context');

1. 

위의 js 코드를 실행하게 되면

전역 실행 컨텍스트 (global execution context)이

실행되고 이것이 호출스택에 쌓이게 됩니다. 

 

 

 

 

2.  

first (  )  함수를 호출하면서,

자바스크립트 엔진은

새로운 first (  ) 실행 컨텍스트를 생성하고

이를 현재의 호출스택 위에 쌓게 됩니다.

 

 

 

 

3. 

호출된 first ( )  함수는 

우선, console.log( 'first' ) ; 를 수행하면서 콘솔 창에 first를 출력합니다. 

다음으로, second ( ) 함수를 호출합니다 . 

따라서 자바스크립트 엔진은

새로운  second (   ) 실행 컨텍스트를 생성하고

이를 현재의 호출스택 위에 쌓게 됩니다.

 

 

4. 

second ( ) 함수는 실행되면서 

console.log( 'second' ) ; 를 수행하면서

콘솔 창에 second 를 출력합니다. 

second ( ) 함수가  종료되면서 호출 스택에  쌓인

second (   ) 실행 컨텍스트가 pop되고 

컨트롤은 그 아래 실행 컨텍스트 first (  ) 함수에 위치하게 됩니다.

 

5. 

 

first ( ) 함수에서 second (  ) 함수 호출까지 실행되었기 때문에 

다음의 코드인  console.log('Again first'); 를 실행하면서 
콘솔 창에 'Again first' 를 출력합니다.

first ( ) 함수가 종료되면서 호출 스택에  쌓인

first (   ) 실행 컨텍스트가 pop되고 

컨트롤은 그 아래 실행 컨텍스트 전역 실행 컨텍스트에 위치하게 됩니다.

 

6.

 

모든 코드가 실행되면 자바스크립트 엔진은 현재 스택에서 

전역 실행컨텍스트를 제거합니다. 

 

 

 

 

 

https://github.com/yjs03057/33-js-concepts

yjs03057/33-js-concepts

https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0

Understanding Execution Context and Execution Stack in Javascript