동기(Synchronous)#

자바스크립트의 동기는 작업이 순차적으로 실행되는 것입니다. 더 정확히 말하면 1번줄 코드가 완료되어야 2번줄이 실행됩니다. (=== 이전 작업이 완료되어야 다음 작업을 진행할 수 있습니다.)
해당 방법의 문제점은 무엇일까요? 1번줄 작업 시간이 100초가 걸리고 2,3,4,5번은 1초가 걸린다면 5번까지의 작업은 총 104초가 걸립니다.
비동기 작업으로 하면 몇 초가 걸릴까요?

비동기(Asynchronous)#

비동기는 이전 작업이 완료되지 않아도 다음 작업을 진행할 수 있습니다. 1번 작업이 매우 오래 걸리므로, 2,3,4,5번 작업을 먼저 수행합니다. 이후 100초가 지나면 콜백함수를 받아 1번줄 작업을 완료합니다. 총 100초의 시간이 걸리게 되겠네요.
이는 마치 작업이 동시에 진행되는 병렬 처리처럼 보입니다. 그러나 병렬처리와의 차이를 이해하려면 자바스크립트는 싱글 스레드 라는 것에 주목해야 합니다.

(+. 웹에서의 비동기 처리하면 Ajax 기술을 떠올려야 합니다. 간단하게 말하면 웹페이지에서 비동기적으로 서버와 데이터를 주고받는 기술입니다. 사용자가 페이지를 보는 동안 백그라운드에서 서버와 통신합니다. 이를 통해 새로고침하지 않아도 화면이 업데이트됩니다.)

병렬처리와 비동기의 차이점#

비동기는 어떻게 이루어지길래 병렬처리와 다른 것일까요?
이를 위해서는 또 몇 개의 개념을 이해해야 합니다. (ㅠㅠ)

1. 호출 스택
2. 콜백큐
3. 이벤트 루프
4. Web APIs
   

먼저 병렬처리는 멀티스레드를 사용해 정말로 동시에 여러 작업을 수행합니다. 그런데 자바스크립트는 싱글스레드인데도 어떻게 멀티스레드처럼 여러 작업을 동시에 처리하는 것”처럼” 보일까요?

호출스택(콜스택)은 자바스크립트 함수가 실행되는 싱글스레드로, 스택이라 LIFO로 처리됩니다. 함수 호출이 쌓이게 됩니다.
2.
콜백큐는 Task Queue, Event Queue라고도 불립니다. 완료된 비동기 작업의 콜백함수가 대기하는 곳입니다. 큐이므로 FIFO로 작동합니다.
3.
이벤트 루프는 자바스크립트 엔진과 브라우저(또는 Node.js, 즉 자바스크립트 런타임 환경) 사이의 중개자 역할을 합니다. 콜스택이 비어있는지 지속적으로 확인합니다.

• 스택이 비었다 : 콜백큐에서 대기 중인 첫번째 콜백을 콜스택으로 이동시킵니다.

Web APIs는 브라우저에서 제공하는 기능들(타이머, 네트워크 요청, 파일 입출력, 이벤트 처리 등)입니다. 비동기 작업이 실제로 처리되는 곳입니다.

간단하게 말하면 콜스택은 싱글스레드이지만, 비동기 작업 처리를 멀티스레드인 WebAPIs에서 해주기 때문에 동시 작업 처리가 가능합니다.
내 비동기 작업 처리 1번을 WebAPI에서 처리해주는 동안 콜스택에서 2,3,4,5번을 처리합니다

전체흐름#

전체흐름을 정리하면 1,2,3,4,5번 줄이 있는 코드를 실행한다면

• 먼저 자바스크립트 엔진이 코드를 동기적으로 실행하며 콜스택에서 순차적으로 처리한다.
• 그러다 비동기 API(fetch, setTimeout 등)를 만나면 이것도 일단 콜스택 추가했다가 해당 작업을 WebAPIs에 위임한다. 위임하고 콜스택에서 제거한다.
• 이 때 2,3,4,5번은 콜스택 스레드에서 처리되고 있다.
• 이와 동시에 WebAPI 스레드에서 1번을 처리한다.
• 이벤트 루프는 계속 주기적으로 실행되고 있었다. 2,3,4,5번은 이미 실행완료되고 콜스택은 비어있는 상태다.
• 1번 처리가 완료되면 콜백함수를 콜백큐에 추가한다.
• 이벤트 루프가 콜백큐가 비어있지 않음을 확인하고 콜스택에 해당 작업=1번을 추가한다.
• 모든 실행이 완료된다!