[JS] 비동기 프로그래밍

42장 : 비동기 프로그래밍

1. 동기 처리와 비동기 처리 

• 동기 처리 : 실행 중인 태스트가 종료할 때까지 다음에 실행될 태스트가 대기하는 방식
• 비동기 처리 : 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

// 타이머 함수 setTimeout이 bar 함수를 블로킹하지 않는다.
setTimeout(foo, 3 * 1000);
bar();
// bar 호출 -> (3초 경과 후) foo 호출

• setTimeout, setInterval, HTTP 요청, 일부 메서드를 제외한 이벤트 핸들러는 비동기 처리 방식으로 동작한다.

---

2. 이벤트 루프와 태스크 큐

• 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다.
  • 콜 스택 : 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다.
  • 힙(heap) : 힙은 객체가 저장되는 메모리 공간이다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
• 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다.
  • 태스크 큐 : setTimeout이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
  • 이벤트 루프 : 이벤트 루프는 콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리고 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 태스크 큐에 일시 보관된 함수들은 비동기 방식으로 동작한다.

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

setTimeout(foo, 0); // 0초(실제는 4ms) 후에 foo 함수가 호출된다.
bar();

• 비동기 함수인 setTimeout의 콜백 함수(foo)는 태스크 큐에 푸시되어 대기하다가 콜 스택이 비게 되면, 다시 말해 전역 코드 및 명시적으로 호출된 함수가 모두 종료하면 비로소 콜 스택에 푸시되어 실행된다.

---

Deep Dive Study week - 02