[hotamul] Javascript 비동기 작업 이해하기 (+forEach 비동기적으로 실행)

익숙하게 들어봤을 AJAX, setTimeout, DOM 조작 API들은 모두 비동기적으로 작동한다.

 

Javascript는 싱글쓰레드인데 어떻게 비동기적으로 작동할 수 있을까?

 

아래 영상을 참고하면 Javascript의 비동기적인(비동기적인 것처럼) 작동 방식과 Javascript의 Event Loop, Call Stack, Callback Queue, Web APIs에 대해 이해할 수 있다.

 

What the heck is the event loop anyway?

 

아래 이미지는 영상에서의 Javascript 런타임 환경에 대한 이해를 돕기 위한 이미지이다.

 

 

요약하자면 Javascript는 Call Stack에 있는 function call들을 우선적으로 처리하고 Call Stack이 비어 있을 때 Callback Queue에 담겨있는 작업들(준비가 완료된)을 Event loop가 Call Stack에 담는다.

 

랜더링 또한 Callback Queue에 담긴 작업들 처럼 실행되게 되는데 (Call Stack에 아무것도 없을 때!) Call Stack을 비워두어라! 라는 말이 무엇인지 이제 이해되었다. loop를 돌면서 반복적으로 오랫동안 Call Stack에서 작업이 실행되게 되면 랜더링, I/O bound 작업, Timers(setTimeout과 같은) 실행되지 못하게 된다.

 

Call Stack, Callback Queue의 작동 방식을 애니메이션으로 확인하고 싶다면 링크에서 확인할 수 있다. 랜더링 작업의 영향도 확인하고 싶다면 로고(loupe) 옆에 도구처럼 생긴 아이콘을 클릭하고 Simulate renders를 클릭하자.

 

기억해야할 가장 중요한 키 포인트는 Call Stack을 비워라!!이다.

 

forEach를 비동기적으로 실행하는 방법!

Call Stack을 잘 비워두어야 랜더링이 멈추지 않는다는 것을 이해했다. 그렇다면 forEach와 같은 반복 작업들을 비동기적으로 실행할 수 있을까? (동기적으로 실행하려면 async, await를 사용하던데...)

 

아래 코드 처럼 setTimeout을 사용하고 인자에 0을 넣어주면 된다.

function asyncForEach(array, cb) {
  array.forEach((i) => {
    setTimeout(cb(i), 0);
  })
}

asyncForEach([1,2,3,4], (i) => {
  console.log("processing async", i);
})