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

🌻 함수의 실행

함수를 호출할 때 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되며 함수의 실행이 종료될 때 실행 컨텍스트 스택에서 팝된다. (너무 길어서 앞으로는 함수 실행 컨텍스트 스택을 스택이라고 부르겠다.) 스택에 함수 실행 컨텍스트가 푸시된다는 것은 결국 '함수의 실행'을 의미한다.

const foo = () => {};
const bar = () => {};

foo();
bar();

만약 위와 같이 함수가 선언된 후에 실행시킨다면, 처음 실행 컨텍스트 스택에는 전역 실행 컨텍스트가 푸시되고 이후에 foo 함수의 실행 컨텍스트가 푸시된다. 푸시는 곧 함수의 실행이므로 foo 함수가 실행되고 함수가 끝나면 스택에서 팝된다. 그 후에 bar 함수의 실행 컨텍스트가 스택에 푸시되고 마찬가지로 실행 후에는 스택에서 팝된다.

🌻 싱글스레드(single thread)

이렇듯 함수의 실행 순서는 실행 컨텍스트 스택을 통해 관리가 된다. 그런데 여기서 중요한 부분은 자바스크립트 엔진은 실행 컨텍스트 스택이 1개인 single thread 라는 점이다. 때문에 함수를 동시에 2개 이상 실행시킬 수가 없다. 실행 중인 실행 컨텍스트를 제외한 나머지 실행 컨텍스트는 대기하고 있어야 한다. 따라서 시간이 오래 걸리는 함수 등을 실행하면 블로킹(작업 중단)이 발생하게 된다.

🌻 동기와 비동기

자바스크립트에서 동기 처리(synchronous) 를 하게 되면 실행 순서는 보장할 수 있지만 이 과정에서 블로킹이 일어날 수 있으므로 비효율적이 될 수 있다. 만약 처리해야 할 프로세스가 a, b, c 3개 있을 때 a -> b -> c 의 순서로 호출됨을 가정해보자. a와 c는 1ms 에 끝나지만 b가 30분이 걸린다면 c는 b에 종속적이지 않아도 무조건 30분이 지나야 실행이 된다. 얼마나 비효율적인가?

그래서 나온 개념이 바로 비동기 처리(asynchronous) 다. 비동기 처리는 현재 실행 중인 프로세스가 종료되지 않더라도 다음 프로세스를 실행하는 방식이다. 비동기는 callback function 을 사용해서 구현을 할 수 있는데 이는 callback hell 을 발생시킬 수 있다. 이에 대해서는 다음에 설명하도록 하겠다.

근데 이상하지 않은가? 실행 컨텍스트 스택은 한 개라면서 어떻게 건너뛰는 게 가능할까.

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

자바스크립트는 싱글 스레드지만 브라우저가 동작하는 것을 보면 여러 개의 태스크가 동시에 처리되는 것처럼 보인다. 이러한 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프 다.

🌻 자바스크립트 엔진 - 콜 스택과 힙

이벤트 루프는 크롬과 같은 브라우저에 내장되어 있는 기능이다. 구글의 V8 자바스크립트 엔진과 같이 대부분의 자바스크립트 엔진은 크게 2개의 영역으로 구분된다.

• 콜 스택
  = 실행 컨텍스트 스택
  자바스크립트 엔진은 1개의 콜 스택을 가지고 있으므로 동시에 여러 개의 함수 실행 컨텍스트를 실행할 수 없다.
• 힙
  : 객체가 저장되는 메모리 공간
  실행 컨텍스트는 힙에 저장된 객체를 참조한다.
  

🌻 브라우저 - 태스크 큐와 이벤트 루프

자바스크립트 엔진은 결국 콜 스택에 있는 실행 컨텍스트들을 순차적으로 실행시키는 역할이며, 비동기에서 이외의 처리들은 브라우저 혹은 Node.js 에서 담당한다. 이를 위해 브라우저는 태스크 큐와 이벤트 루프를 제공한다.

• 태스크 큐
  : 비동기 함수의 콜백 함수, 이벤트 핸들러가 일시적으로 보관되는 영역
  별도로 프로미스의 후속 처리 메소드의 콜백 함수는 마이크로태스크 큐에 일시적으로 보관된다.
• 이벤트 루프
  콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다. 만약 콜 스택이 "비어 있고" 태스크 큐에 대기 중인 함수가 있으면 이벤트 루프가 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

🌻 예제

const foo = () => console.log('foo');
const bar = () => console.log('bar');

// setTimeout 은 비동기 함수
// 첫 번째 인자로 callback function, 두 번째 인자로 delay time(ms)를 입력 받는다.

setTimeout(foo,0);
bar();

위의 예제에서 동작하는 순서를 간략하게 정리하면 다음과 같다.

1. 전역 코드가 평가되고 전역 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.
2. 전역 코드가 실행되어 setTimeout 함수가 호출된다. setTimeout 함수의 함수 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.
3. setTimeout 함수가 실행되어 콜백 함수를 브라우저에 호출 스케줄링 요청하고 종료되어 콜 스택에서 팝된다.
4. 브라우저, 자바스크립트 엔진 동시 수행
   • 브라우저
     호출 스케줄링(타이머를 설정하고 시간이 만료되면 콜백 함수를 태스크 큐에 푸시)를 진행한다. delay 시간은 최소 4ms 이므로 0을 넣었지만 4ms 뒤에 foo 함수가 실행된다. 콜 스택이 비어야 이벤트 루프가 콜백 함수를 이동시키기 때문에 지정된 시간에 정확히 호출된다는 보장은 없다.
   • 자바스크립트 엔진
     bar 함수가 호출되고 함수 실행 컨텍스트가 생성되어 콜 스택에 푸시된다.
5. 전역 코드 실행까지 종료되고 전역 실행 컨텍스크가 콜 스택에서 팝된다. 따라서 콜 스택이 완전히 비어있는 상태가 된다.
6. 이벤트 루프에 의해 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있는 것이 확인되면 콜백 함수인 foo가 이벤트 루프에 의해 콜 스택에 푸시된다.

🌻