자바스크립트의 동작원리 : 엔진, 런타입, 호출 스택

● 자바스크립트 엔진

---

- 대표적 엔진의 예는 Google V8로 Chrome, Node.js에서 사용

- Memory Heap : 메모리 할당이 일어나는 곳

- Call Stack : 코드 실행에 따라 호출 스택이 쌓이는 곳

---

● 런타임

---

- 자바스크립트 개발자는 브라우저 내장 API를 사용, 하지만 이 API는 자바스크립트 엔진에서 제공하지 않음

- WEB APIs은 브라우저에서 제공

---

● 호출 스택(Call Stack)

---

- 싱글 쓰레드 기반 언어로 호출 스택은 하나, 즉 한 번에 한 작업만 처리 가능

- 호출 스택은 기본적으로 우리가 프로그램 상에서 어디에 있는지를 기록하는 자료구조

- 예를 들어 함수를 실행하면 해당 함수는 호출 스택 가장 상단에 위치

- 함수 실행이 끝나면(리턴 값을 돌려준다면) 해당 함수는 호출 스택에서 제거

- 호출 스택의 각 단계를 스택 프레임(Stack Frame)이라고 함

- 보통 예외가 발생했을 때 콘솔 로그 상에서 나타나는 Stack Trace가 오류가 발생하기까지의 Stack Trace로 구성

즉, 에러가 났을때의 스택의 단계

- 그리고 호출 스택(Call Stack)의 최대 허용치를 넘게 되면 Overflowing가 발생하여 'Uncaught RangeError : Maximum call stack size exceeded'라는 에러를 발생시킬 것(예를 들면 무한 반복같은 경우)

---

● 동시성(Concurrency) & 이벤트 루프(Event Loop)

---

- 호출 스택에 처리 시간이 오래 걸리는 함수가 있다면, 브라우저는 페이지를 그리지도 못하고, 어느 코드도 실행하지 못하고 계속 그 함수만 실행하기 때문에 우리가 봤을때 가만히 있는 것처럼 보임.

- 그리고 가장 큰 문제점은 호출 스택이 많은 작업을 처리한다면 화면은 오랫동안 응답을 하지 못하게 되고, 브라우저는 페이지를 대기할것인지 종료할것인지에 대한 경고창을 보여주게 됨

- 그렇다면 랜더링 동작을 방해하지 않고 브라우저의 응답도 끊지 않으면서 처리 시간이 오래 걸리는 함수를 실행하는 방법은 바로 비동기 콜백입니다.

---

● 출처

---

- https://joshua1988.github.io/web-development/translation/javascript/how-js-works-inside-engine/#%ED (한국어)

- https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf (영문)

---