9. 자바스크립트 엔진

👀  JS 엔진?

자바스크립트 코드를 실행하는 프로그램

V8 엔진 -> Node.js / Chrome

 

👀  JS 엔진 내부

1. 콜 스택

JS에서 프로그램을 실행할때 쓰는 실행 컨텍스트를 스택이라는 자료구조 형태로 쌓여져있는 공간.

 

2. 브라우저 런타임

web Api(DOM, Timers, Fetch 등등)랑 콜백 큐 요소가 있고

콜백 큐에서 콜백 함수를 빼낼때는 이벤트 루프를 통해서 빼낸다.

 

3. 힙

힙이라는 공간안에서 오브젝트들이 저장되어 있다.

 

4. 실행 컨텍스트

자바스크립트가 실행되는 환경.

만약 App.js를 실행한다고 했을때 컴파일 후에

1. 전역 실행 컨텍스트
2. 생성전역 실행 컨텍스트
3. 실행함수 실행 및 콜백 기다림

이순서로 실행 컨택스트가 생성이된다.

 

그렇다면 아래의 JS 코드에서는 몇 개의 실행 컨텍스트가 생성이 될까?

const title = ‘Hello’;

const firstFunction = () => {
   let a = 1;
   a+=3;
   return a;
}

const secondFunction = () => {
   let b = 20;
   return b;
}

답은 3개.

1. 전역 실행 컨텍스트

2. firstFunction 실행 컨텍스트

3. secondFunction 실행 컨텍스트

 

👀  콜 스택의 동작 순서

const title = ‘Hello’;

const firstFunction = () => {
   let a = 1;
   const b = secondFunction(2, 3);
   a = a + b;
   return a;
}

Function secondFunction = (x, y) => {
   Var b = 20;
   return c;
}

const x = firstFunction();

JS 코드가 실행이 되면 코드 위에서 아래로 순서대로 읽어나간다.

1. 그때 제일 먼저 글로벌 실행 컨택스트를 만들어서 콜스택에 쌓인다.

2. x의  firstFunctiong함수가 실행이 될때 firstFunctiong() 실행 컨텍스트가 또 콜스택에 쌓인다.

3. firstFunctiong함수안의 secondFunction()가 실행이 될때 secondFunction() 실행 컨텍스트가 또 콜스택에 쌓인다.

 

여기까지의 순서로 쌓인 콜스택의 실행 컨택스트 순서들 - 1

secondFunction()
firstFunctiong()
글로벌

---

secondFunction()안의 c가 return이 되어 secondFunction() 실행이 끝이 나면

콜스택의 맨위에 쌓인 secondFunction() 실행 컨택스트가 삭제된다.

 

여기까지의 순서로 쌓인 콜스택의 실행 컨택스트 순서들 - 2

firstFunctiong()
글로벌

---

secondFunction()실행이 끝나면 다시 firstFunctiong()로 돌아가서 a를 return 하는

나머지 실행을 모두 마치면 또 firstFunctiong() 실행 컨택스트가 삭제된다.

 

여기까지의 순서로 쌓인 콜스택의 실행 컨택스트 순서들 - 3

글로벌

---

이렇게 const x의 함수와 그 하위 함수들까지 모두 실행이 마무리되면 마지막으로 남아있던

글로벌 실행 콘택스트도 삭제된다.

 

여기까지의 순서로 쌓인 콜스택의 실행 컨택스트 순서들 - 4

[ 비어있음 ]

---

이렇게 JS 콜 스택은 한번에 한개의 실행만 처리하는것을 알 수 있다.