자바스크립트에서 비동기 처리가 가능하게 해주는 Web API

API = Application Programming Interfaces로, 직접 기능을 만들지 않고 누군가가 만든 기능들을 가져다 쓰는 것이다. 

그 중 DOM APIs를 사용해서 웹페이지에 있는 요소들을 조작할 수 있다. 

 

Process와 Thread의 차이점은?

프로세스는 운영체제 위에서 연속적으로 실행되고 있는 프로그램.
카카오 유튜브를 보고있다면 각각의 프로세스라고 보면 된다. 
프로세스(프로그램) 안에서 수행하는 여러 기능.
게임을 한다고 치면 로딩중 데이터 받아오는 기능, 음악 나오는 기능 등등이 하나하나의 쓰레드이다. 

쓰레드는 한가지 일만 한다. 쓰레드 안에서는 동기. 하지만 여러개의 쓰레드가 작동되니까 여러가지 일이 처리되는 것이다. 

 

JavaScript는?

싱글쓰레드이다. 즉, 콜스택에서 함수가 호출될 때 그 함수가 끝나기 전까지 다른 함수는 실행이 되지 않는다.

 

그렇다면 콜백함수는 어떻게 호출이 되나?

Last in - First out으로, 마지막에 들어온 것이 가장 첫번째로 나간다. 

 

그렇다면, 어떻게 자바스크립트에서 비동기적인 일이 처리되는가?

브라우저에 V8이라는 자바스크립트 엔진이 내장이 되어있다. 자바스크립트 자체에서는 Stack이 1개밖에 없는데, 브라우저에서는  Web APIs가 있어서 DOM객체를 이벤트 적용해주기, Ajax사용해서 비동기 일해주는 것들, setTimeout으로 비동기로 시간을 카운팅해서 실행해주는 작업 등등이 처리된다.  

 

브라우저에는 Callback Queue가 있어서 여기서 onClick이나 onload같은 이벤트가 발생했었을 때 당장 호출되는게 아니라 특정 이벤트 발생했을 때 콜백큐에 쌓이고 호출되도록 해준다.   

 이벤트루프는 특정한 시간에 계속 돈다. 
Stack에 함수가 다 호출이 되어서 공간이 비면은 콜백큐에 있는 것들을 실행하라고 자바스택에 옮겨준다.

 

setTimeout이 먼저 실행이 되고 그 다음에 hello chanyeong이 실행이 되어야 하는데
먼저 setTimeout이 호출되면 Task Queue에 먼저 쌓인다. 여기서 setTimeout은 자바스크립트에 있는 함수가 아니라 Web API에 있는 함수이기 때문에 Task Queue에 쌓이게 된다. 그래서 먼저 실행이 되지 않는다. 비동기적인 것들을 처리하는 스택이 따로 있다고 보면 된다

결국 자바스크립트가 비동기 처리를 할수 있는 이유는 Web API와 Callback Queue(Task Queue)덕분이다.