동기적 제어 흐름

• 동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것을 의미한다.
• 분기분, 반복문, 함수 호출 등이 동기적으로 실행된다.
• 동기는 코드의 흐름과 실제 제어 흐름이 동일하다. (순차적)
• 싱글 스레드 환경에서 코드가 메인 스레드를 긴 시간 점유하면, 프로그램을 멈추게 한다.

동기 동작 원리

1. 코드가 실행되면 순서대로 Call stack에 실행할 함수가 쌓임 (push)
2. 쌓인 반대 순서로 함수 실행 (LIFO)
3. 실행된 함수는 Call stack에서 제거됨 (pop)

비동기적 제어 흐름

• 비동기적 제어 흐름은 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행하는 것을 의미한다.
• 프로미스, 콜백 함수를 호출하는 함수 등은 비동기적으로 실행된다.
• 비동기는 코드 흐름과 실제 제어 흐름이 다르다.
• 비동기 작업을 기다리는 동안 메인 스레드는 다른 작업을 처리한다.

비동기 동작 원리

1. Call stack에서 비동기 함수가 호출되면 Call stack에 먼저 쌓였다가 Web API로 이동한 후 해당 함수가 등록되고 Call stack에서 사라짐
2. Web API에서 비동기 함수의 이벤트가 발생하면, 해당 콜백 함수는 Callback Queue에서 push(이동)된다.
3. 이제 Call stack이 비어있는지 이벤트 루프가 확인하는데, 비어있으면 Call stack에 Callback Queue에 있는 콜백 함수를 넘겨줌 (push)
4. Call stack에 들어온 함수는 실행되고 실행이 끝나면 Call stack에서 사라짐

비동기 처리가 필요한 이유

• 효율성을 상승시켜 처리 속도를 높여준다.
• 서버와 통신할 때 가장 많은 시간이 소요되므로 네트워크 관련 작업들은 비동기적으로 구현되어 있다.
• 네트워크 요청을 보내는 작업, 파일 시스템에서 파일을 읽거나 쓰는 작업, 데이터베이스 쿼리를 수행하는 작업 등 시간이 오래 걸리는 작업을 수행할 때 비동기 작업이 사용된다.

자바스크립트 비동기

• 자바스크립트 엔진은 하나의 메인 스레드로 구성되고, 메인 스레드는 코드를 읽고 한 줄씩 실행한다,
• 자바스크립트는 다른 멀티스레드 프로그래밍 언어와 다른 방식으로 비동기 동작을 처리한다.
• 자바스크립트 엔진은 비동기 처리를 제공하지 않는다. 대신, 비동기 코드는 정해진 함수를 제공하여 활용할 수 있는데 이 함수들을 API라고 한다.
• 비동기 API의 예시로 setTimeout, setInterval, fetch, XMLHttpRequest등의 Web API가 있다.
• node.js의 경우 파일 처리 API, 암호화 API등을 제공한다.

비동기 처리 모델

• 비동기 코드를 처리하는 모듈은 자바스크립트 엔진 외부에 있다.
• Event Loop, Task queue, Job queue 등으로 구성된다.
• API 모듈은 비동기 요청을 처리 후 Task queue에 콜백 함수를 넣는다.
• 자바스크립트 엔진은 call stack이 비워지면, Task queue의 콜백 함수를 실행한다.

*이미지 출처 : 엘리스 코딩