Q&A

자바스크립트는 싱글스레드인데, 어떻게 비동기 처리가 가능한거지?

• 자바스크립트 자체에서 비동기 처리를 하는게 아니라 브라우저의 도움을 받는다.
• 자바스크립트는 비동기 요청문을 보면 그걸 자기가 실행하는게 아니라 브라우저API를 사용해서 브라우저에게 비동기 처리를 맡겨버린다.
• 비동기 처리는 브라우저 내부의 자바스크립트 코어 상위단에서 일어나게 된다.

브라우저 내부를 살펴보자

힙

• 객체, 변수등이 이곳에 저장된다.

스택

• 함수를 호출하면 스택에 프레임이 생긴다. 자바스크립트는 스택에 있는 함수들을 순차적으로 처리한다. (동기적으로)

브라우저API

• 웹 브라우저에 내장된 API
• 자바스크립트 코어 상위에 존재하고, 이것 덕분에 우리가 JS만으로 할 수 없는 일들을 추가로 할 수 있게된다.
• 이 브라우저 API는 복잡한 C++코드로 짜여져 있음

코드에 대한 깊은 이해

function main() {
  console.log('A');
  setTimeout(
    function display() { console.log('B'); }
  , 0);
  console.log('C');
}

main(); //A, C, B 순서로 출력

위 코드가 실행되면 어떤일이 펼쳐지는지 자세히 살펴보자.

1. 먼저 main함수가 콜스택에 삽입된다.
2. main함수가 실행되고 console.log('A'); 구문이 실행되어 콘솔에 A가 찍힌다.
3. setTimeout함수가 실행되는데 이 함수는 브라우저에게 0초 뒤에 display() 콜백함수를 실행시켜달라는 명령이다.(자바스크립트 코어 → 브라우저)