출처

https://ljtaek2.tistory.com/142

https://blog.toycrane.xyz/진짜-쉽게-알아보는-자바스크립트-동작-원리-c7fbdc44cc97

https://velog.io/@adultlee/JS는-어떻게-멀티스레드인척-할까

싱글 스레드

JS는 싱글 스레드. 한번에 한가지 일만 처리. call 스택이 하나라고 표현할 수 있다.

실행하고 있는 함수가 있는 경우 다른 일을 할 수 없고 다른 일들이 블락되게 된다. 그렇게 되면 브라우저에서 오래 걸리는 작업이 실행될 경우 웹페이지 ui가 멈추고 사용자는 어떤 행동도 못하게 됨

예를 들어 크롬에서 alert창이 떳을 때 해당 창을 닫기 전까지 아무 것도 할 수 없는 것과 마찬가지.

만약 1분 걸리는 작업이 있다고 가정할 때, 브라우저는 아무런 행동(화면 스크롤, 버튼 클릭)도 하지 못하게 된다. 이때 사용하는 것이 바로 비동기 콜백이다.

이를 위해서 자바스크립트 엔진, web api 그리고 이벤트 루프에 대한 이해가 먼저 필요.

자바스크립트 엔진

자바스크립트 엔진은 javascript 코드를 이해하고 실행을 도와준다. 대표적으로 v8엔진(chrome, node.js에서 사용)이 있다. 자바스크립트 엔진은 크게 Memory heap과 Call stack으로 이뤄져 있다.

Memory heap

데이터를 임시 저장하는 곳으로 함수나 변수, 함수 실행하는 데 사용되는 값들을 저장

Call stack

코드가 실행되면 코드의 내부의 실행 순서를 기록해 놓고, 하나씩 순차적으로 진행할 수 있도록 도와주는 곳입니다.