42.1 동기 처리와 비동기 처리

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖음 -> 싱글 스레드 방식으로 동작

• 실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸시되면 함수 실행의 시작을 의미하며, 실행이 종료되면 실행 컨텍스트 스택에서 팝되어 제거됨
• 단 하나의 실행 컨텍스트 스택을 갖기에 동시에 2개 이상의 함수를 실행할 수 없음

싱글 스레드 방식

• 한 번에 하나의 태스크만 실행
• 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생

동기 처리

• 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식
• 장점: 실행 순서 보장
• 단점: 태스크가 종료할 때까지 이후 태스크들이 블로킹됨

비동기 처리

• 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
• 장점: 블로킹이 발생하지 않음
• 단점: 실행 순서 보장되지 않음
• 비동기 처리를 위한 콜백 패턴은 콜백 헬을 발생시켜 가독성을 나쁘게 하고, 비동기 처리 중 발생한 에러의 예외 처리가 곤란하며, 여러 비동기 처릴르 한번에 처리하는데 한계가 있음 (프로미스에서 비동기 제어 방법 확인)
  - 콜백 헬: 콜백 함수를 중첩하여 사용할 때 코드가 복잡해지고 가독성이 저하되는 현상
  
• setTimeout, setInterval, HTTP 요청, 이벤트 핸들러는 비동기 처리 방식으로 동작

42.2 이벤트 루프와 태스크 큐

이벤트 루프: 자바스크립트의 동시성 지원, 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크큐에 대기 중인 함수를 콜 스택으로 이동
태스크 큐: setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

그림 42-4

• 만약 동기 처리라면 setTimeout이 콜 스택으로 푸시된 상태에서 4ms후에 foo함수를 호출하고, 호출이 완료되면 boo함수를 호출
• 비동기 처리는 setTimeout이 콜 스택으로 푸시되고, 4ms를 기다리지 않고 boo함수가 먼저 태스트 큐에 푸시되기 때문에 setTimeout의 4ms가 끝나면 boo함수가 먼저 푸시되고 그 다음에 콜백 함수은 foo가 태스크 큐에서 대기하고 있다 콜 스택으로 푸시

관련 참고 영상: https://youtu.be/8aGhZQkoFbQ?si=pbF3dT1n0AkbbdCR