자바스크립트와 비동기

보통의 자바스크립트의 동기적 처리 

자바스크립트에서 우리가 쓰는 코드들은 

보통 한 줄 한 줄씩 읽혀지면서 실행이 된다. 

const a = 1;

const b = () => a+1;

const c = () => a+b();

console.log(c());

라고 하면 c()는 3을 출력한다. 

c()를 실행을 하면 콜스택에 순서로 함수가 쌓인다.

b()

c()

스택은 나중에 들어온 것이 먼저 나가므로 b()가 먼저 나와서 a+1이 계산되어 2가되고,

이후에 C의 a+b()에 b()의 반환값 2가 a=1과 합쳐서 3이된다. 

즉 보통의 코드들은 선행할 함수들이 처리가 완료된 후에 그 값을 이용해 계산이된다. 

이 콜스택은 하나의 싱글스레드로 과정이 진행되기 때문에 하나의 컨텍스트를 따른다

 

자바스크립트의 비동기적 처리

그런데 자바스크립트 런타임환경에서 제공하는 Web APIs들 

예를 들면 fetch, setTimeout, setInterval등 대부분의 웹 API들은 비동기이다. 

비동기라는 것은 읽고 처리가 다 되기를 기다리지 않고 다음 코드를 읽는다. 

setTImeout은 보통 특정 시간 후에 어떤 처리를 하길 원할 때 사용한다. 

이 때 처리를 setTimeout의 콜백 매개변수로 넣지 않고 단순히 

setTimeout 다음 줄에 넣게 되면 

setTimeout을 사용한 보람도 없이 바로 처리가 되게 된다. 

동기처리는 우리가 주문을 하고 물건을 기다려 받아야 끝나는 주문같은 개념이라면 

비동기처리는 물고기 밥을 던지고 가는 것 같다. 

어떤 처리를 던지기는 하지만 물고기가 다 먹을때까지 기다렸다가 다른 무언가를 하지 않는다. 

콜백함수를 매개변수로 넣어주게 되면 비동기 처리가 완료된 후에

task queue에 해당 콜백을 순서대로 넣고 있다가 

이벤트 리스너가 콜스택이 비었을 때 FIFO순서로 넣어주게 된다.