[자바스크립트] JS Runtime

자바스크립트는 싱글 스레드 언어이다. 즉, 하나의 콜스택과 하나의 메모리힙을 가지고 작동한다.

웹 브라우저는 동기적으로 JS 코드가 실행될 때 별도로 실행된다. 브라우저는 우리가 사용할 수 있는 API를 제공한다. 이를 Web API라고 한다. 이러한 API는 JS를 통해 접근할 수 있다.

Window객체가 브라우저가 제공하는 Web API이다. 여러 종류의 API가 있지만 대표적인 몇가지만 살펴보자면
1. fetch: http 요청보낼 때 사용
2. listen to dom events
3. indexdDB: 브라우저에서 사용할 수 있는 작은 database
4. delay execution
- setTimeout/setInterval: 자바스크립가 아니라 브라우저에서 제공하는 함수다

Web API는 비동기적으로 실행된다. JS엔진과 Web API가 처리하는 방식은 다음과 같다.

JS엔진은 콜스택에서 함수를 하나씩 처리하다가 Web API가 처리하는 함수를 만나면 브라우저로 전달한다. Web API가 해당 함수를 처리하는 동안 기다리지 않고 자신이 처리할 수 있는 함수를 하나씩 처리한다.

Web API는 실행을 마치면 결과를 콜백으로 콜스택에 다시 전달한다. 이때 바로 전달하지 않고 이벤트 루프에서 대기 하고 있는데 콜스택이 비어 있을 때 콜스택으로 push되고 처리된다.

//1.
console.log('1')
//2.
setTimeout(()=>{console.log('2'), 100))
//3.
console.log('3')

1. console.log('1')이 콜스택에 push되고 처리 후 제거된다.
2. setTimeOut을 처리할 순서가 되면 JS엔진은 Web API로 함수를 보내고 콜스택에서는 바로 제거된다. 동시에 Web API는 setTimeout함수를 받아서 처리를 한다.
3. console.log('3')이 콜스택에 push되고 처리 후 제거된다.
4. 3번째 줄 까지 코드가 실행되면 콜스택은 빈 상태가 된다.
   2번 째 줄에서 Web API로 보낸 함수의 결과가 콜백으로 이벤트 루프에서 대기중인데 콜스택이 비어있는 상태이므로 이 때 콜스택에 콜백으로 push된다.

Web API의 응답속도와 상관없이 콜스택이 비어있을 때 이벤트 루프가 콜백을 콜스택에 push하기 때문에 setTimeout의 타이머가 0이라도 실행 순서는 위 코드와 같다

//1.
console.log('1')
//2.
setTimeout(()=>{console.log('2'), 0))
//3.
console.log('3')