Javascript : 실행 컨택스트 와 콜 스택

실행 컨택스트(Execution Context)

자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념을 말한다. 즉 개발자가 코드를 작성하고 실행 할 때는 실행 컨텍스트(Execution Context) 내부에서 실행되고 있는 것이다. 다시 말해 코드들이 실행되기 위한 환경이자 하나의 박스이자 컨테이너라 볼 수 있다.

자바스크립트 코드 실행에 필요한 정보

1. 변수: 전역 변수, 지역 변수, 매개 변수, 객체의 프로펕
2. 함수 선언
3. 변수의 유효범위
4. this

실행 컨택스트의 유형

1. Global Execution Context

• 기본 실행 컨텍스트로 함수 내부에 없는 코드는 전역 컨텍스트에서 실행된다고 생각하시면 됩니다. 이 전역 컨텍스트 안에서는 두 가지 작업을 수행합니다.
  • 첫 번째, window 전역 컨텍스트를 생성합니다.
  • 두 번째, this 를 전역 객체(Global Object)로 설정합니다.

2. Functional Execution Context

• 함수가 호출 될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성됩니다. 각 함수별로 실행 컨텍스트를 가지고 있지만 실행 컨텍스트는 함수가 호출될 때 만들어집니다.
• 함수 실행 컨텍스트(Functional Execution Context)는 얼마든지 있을 수 있으며 새로운 실행 컨텍스트가 생성될 때마다 차례대로 수행됩니다.

콜 스택(call stack)

스택은 LIFO(Last in, First out)구조 형태입니다.

Javascript 엔진은 script 요소를 처음으로 만나는 시점에서 Global Execution Context를 생성하고 Execution Stack에 push 합니다.

그리고 엔진이 함수 호출을 찾을 때마다 해당 함수에 대한 새로운 실행 컨텍스트를 생성해 Execution Stack의 맨 위로 푸시합니다.

Javascript 엔진은 실행 컨텍스트가 스택에 맨 위에있는 함수를 실행한 뒤 함수가 종료되면 스택에서 제거한 뒤 호출 스택은 최신화된 스택에서 맨위의 컨텍스트를 이전과 동일한 로직으로 접근합니다.

let a = "Notion posting";

function first(){
	console.log("Inside first function");
	second();
	console.log("Again inside first function");
}

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

first();
console.log('Inside Global Execution Context');
/*
Inside first function
Inside second function
Again inside first function
Inside Global Execution Context
*/

---

레퍼런스 :
https://catsbi.oopy.io/fffa6930-ca30-4f7e-88b6-28011fde5867
https://www.youtube.com/watch?v=61iolhWgQt0&ab_channel=%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9