42장.비동기 프로그래밍 <모던 자바스크립트 스터디 정리>

정의

• 동기
  • 현재 실행 중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식
• 비동기
  • 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식
• 싱글 스레드 방식
  • 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.
• 블로킹
  • 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹(작업 중단)이 발생한다.
• setTimeOut
  • setTimeOut기능 덕분에 비동기 처리를 통해서 한가지 태스크를 하고 있을때에도 동시에 다른 태스크를 곧바로 실행할수 있다.
• 타이머 함수인 setTimeout과 setInterval, HTTP요청, 이벤트 핸들러는 비동기 처리 방식으로 동작한다.
  • 이벤트 루프와 브라우저 환경 사진
   

 

•  콜 스택
  • 비동기 처리는 이벤트 루프와 태스크 큐와 깊은 관계가 있다.
  • 콜 스택 제거되는 스택 자료구조인 실행 컨텍스트 스택이 바로 콜 스택이다.
  • 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.

 

• 함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜스택에 푸시되어 순차적으로 실행된다.
• 실행 컨텍스트 에서 살펴본 바와 같이 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고
• 힙메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정해야한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화 되어 있지 않다는 특징이 있다.
• 힙은 객체가 저장되는 메모리 공간이다. 콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다.
• 태스크 큐태스크 큐와는 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 마이크로태스크 큐도 존재한다.
• setTimeout 이나 setInterval과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.
• 이벤트 루프이때 콜 스택으로 이동한 함수는 실행된다. 즉 태스크 큐에 일시 보관된 함수들은 비동기 처리 방식으로 동작한다.
  • 브라우저 환경에서 실행되는 foo와 bar 중 먼저 실행될 함수는 무엇일까?

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

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

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

• 1. 콜 스택에 푸시
  2. setTimeout 함수가 호출된다. 실행 컨텍스트에 푸시.
  3. 콜스택에서 팝된다. 이때 호출 스케줄링, 즉 타이머 설정과 타이머가 만료되면 콜백 함수를 태스크 큐에 푸시
  4. 브라우저가 수행하는 4-1과 자바스크립트 엔진이 수행하는 4-2는 병행 처리된다4ms후에 콜백 함수 foo가 태스크 큐에 푸시되어 대기하게 된다.foo 함수는 아직 태스크 큐에서 대기 중이다.
  5. 4-2. bar 함수가 호출되어 bar 함수의 함수 실행 컨텍스트가 생성되고 콜 스택에 푸시.
  6. 4-1. 브라우저는 타이머 설정후 만료를 기다린다. 만료 되면 foo가 태스크 큐에 푸시된다.
  7. 전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝된다.
  8. 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고 태스크 큐에서 대기 중인 콜백 함수 foo가 이벤트 루프에 의해 콜 스택에 푸시된다.이후 foo 함수가 종료되어 콜 스택에서 팝된다.
  9. 다시 말해, 콜백 함수 foo의 함수 실행 컨텍스트가 생성되고 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다.
• 만약 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.
• 싱글 스레드 방식으로 동작하는것은 브라우저 일까 자바스크립트 엔진일까?
  • 자바스크립트 엔진이다.
  • 만약 자바스크립트 코드가 자바스크립트 엔진에서 싱글 스레드 방식으로 동작한다면
  • 자바스크립트는 비동기로 동작 할 수 없다.
  • 즉 자바스크립트 엔진은 싱글 스레드로 동작하지만 브라우저는 멀티 스레드로 동작한다.