[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fbyjuun.com%2Fposts%2FJavaScript%2Fdeep-dive-js-42&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 🌟 동기 처리와 비동기 처리 23장 실행 컨텍스트에서 살펴본 바와 같이, 함수를 호출하면 함수 코드가 평가되어 함수 `실행 컨텍스트`가 생성된다. 이때 생성된 함수 실행 컨텍스트는 `실행 컨텍스트 스택(Call Stack)` 에 푸쉬되고 함수 코드가 실행된다. 즉, **실행 컨텍스트 스택에 함수 실행 컨텍스트가 푸쉬되는 것은 바로 함수 실행의 시작**을 의미한다. 함수가 호출된 순서대로 실행되는 이유는 함수가 호출된 순서대로 실행 컨텍스트 스택에 푸쉬되기 때문이다. > 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가진다. 즉, **동시에 2개 이상의 함수를 동시에 실행할 수 없다는 것**을 의미한다. 실행 컨텍스트 스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두, `실행 대기 중인 Task들`이다. 대기 중인 실행 컨텍스트들은 현재 실행 중인 실행 컨텍스트가 팝되어 제거되면, 비로소 실행 된다. > 이처럼, 자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드(Single Thread)방식으로 동작한다. 싱글 스레드 방식은 **한 번에 하나의 태스크만 실행**할 수 있기 때문에, 처리에 시간이 걸리는 태스크를 실행하는 경우 `블로킹`(작업 중단)이 발생한다. 예를 들어, `setTimeout` 함수와 유사하게 일정 시간이 경과한 이후에 콜백 함수를 호출하는 `sleep` 함수를 구현해 보자. ```js function sleep(func, delay) { const delayUntil = Date.now() + delay; while (Date.now() < delayUntil); func(); } function foo() { console.log("foo"); } function bar() { console.log("bar"); } sleep(foo, 3 * 1000); bar(); ``` 위 예제의 `sleep` 함수는 3초 후에 `foo` 함수를 호출한다. 이때, `bar` 함수는 `sleep` 함수의 실행이 종료된 이후 호출되므로 **3초 이상 호출되지 못하고 블로킹**된다. > 이처럼 현재 실행 중인 테스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기처리라고 한다. 동기 처리 방식은 태스크를 순서대로 하나씩 처리하기 때문에, **실행 순서가 보장된다는 장점**이 있지만, **앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹되는 단점**이 있다. 이제 위 예제를 타이머 함수인 `setTimeout`을 사용하여 수정해 보자, ```js function foo() { console.log("foo"); } function bar() { console.log("bar"); } setTimeout(foo, 3 * 1000); bar(); ``` `setTimeout` 함수는 앞서 살펴본 `sleep` 함수와 유사하게 일정 시간이 경과한 이후 콜백 함수를 호출하지만, `setTimeout` 함수 이후의 태스크들은 **블로킹하지 않고, 곧바로 실행**된다. > 이처럼 현재 실행 중인 태스크가 종료되지 않더라도, 다음 태스크를 실행하는 방식을 비동기처리라고 한다. 비동기 처리 방식은 다음 태스크를 바로 실행해 **블로킹이 발생하지 않는 장점**이 있지만, **태스크의 실행 순서가 보장되지 않는 단점**이 있다.
# 🌟 이벤트 루프와 태스크 큐 자바스크립트는 `싱글 스레드`로 동작한다. 하지만, 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다. > 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프이다. `이벤트 루프`는 브라우저에 내장되어 있는 기능 중 하나다.

구글의 V8 자바스크립트 엔진을 비롯한 대부분의 자바스크립트 엔진은 크게 `2개의 영역`으로 구분할 수 있다. ### 콜 스택 (Call stack) - 소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가되고, 제거되는 스택 자료구조인 `실행 컨텍스트 스택`이다. - 함수를 호출하면 순차적으로 실행 컨텍스트가 `Call Stack`에 푸시되어 순차적으로 실행된다. 한번에 하나의 태스크가 실행할 수 있다. ### 힙 (Heap) - 힙은 `객체가 저장되는 메모리 공간`이다. 실행 컨텍스트는 힙에 저장된 객체를 참조한다. - 메모리에 값을 저장하려면 먼저 값을 저장할 메모리의 크기를 결정해야 한다. **객체는 원시 값과 달리 크기가 정해져 있지 않아 할당해야 할 메모리 공간의 크기를 런타임에 결정**해야 한다. 따라서, 구조화되어 있지 않다. > 이처럼 `Call Stack`과 `Heap`으로 구성되어 있는 `JavaScript Engine`은 단순히 **태스크가 요청되면 `Call Stack`을 통해 요청된 작업을 순차적으로 실행**할 뿐이다. > 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 `JavaScript Engine`을 구동하는 환경인 `브라우저` 또는 `NodeJS`가 담당한다. 예를 들어, 비동기 방식으로 동작하는 `setTimeout`의 `콜백 함수`의 `평가`와 `실행`은 `자바스크립트 엔진`이 담당하지만, **호출 스캐쥴링을 위한 타이머 설정과 콜백 함수의 등록**은 `브라우저` 또는 `NodeJS`가 담당한다. 이를 위해, 브라우저 환경은 `Task Queue`와 `Event Loop`를 제공한다. ### `Task Queue`(Task queue) - **비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역**이다. Task Queue와 별도로 프로미스의 후속 처리 메서드의 콜백 함수가 일시적으로 보관되는 `Micro Task Queue`도 존재한다. ### 이벤트 루프(Event loop) - `EventLoop`는 **Call Stack에 현재 실행 중인 실행 컨텍스트가 있는지**, **Task Queue에 대기 중인 함수(비동기 콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인**한다. - 만약 **`Call Stack`이 비어 있고**, **`Task Queue`에 대기 중인 함수가 있다면**, **이벤트 루프는 순차적으로 `Task Queue`에 대기 중인 함수를 `Call Stack`으로 이동**시킨다. 이후, `Call Stack`으로 이동한 함수는 실행된다. 다음 예제가 어떻게 동작하는지 살펴보자 ```js function foo() { console.log("foo"); } function bar() { console.log("bar"); } setTimeout(foo, 0); // 0초(실제는 4ms) 후에 foo 함수가 호출된다. bar(); ``` 1. 전역 코드가 평가되어 `전역 실행 컨텍스트`가 생성되고 `Call Stack`에 푸쉬된다. 2. 전역 코드가 실행되기 시작하여, `setTimeout` 함수가 호출된다. 이때, `setTimeout`의 실행 컨텍스트가 생성되고 `Call Stack`에 푸쉬되어 현재 실행 중인 실행 컨텍스트가 된다. 3. `setTimeout` 함수가 실행되면 `콜백 함수`를 `호출 스캐줄링`하고 종료되어, `Call Stack`에서 pop된다. 이때, 호출 스캐줄링, 즉 **타이머 설정과 타이머가 만료되면 콜백 함수를 `Task Queue`에 푸시하는 것은 브라우저의 역할**이다. 4. 브라우저가 수행하는 `4-a`와 자바스크립트 엔진이 실행하는 `4-b`는 병렬처리된다. a. `브라우저`는 타이머를 설정하고 타이머의 만료를 기다린다. 이후 타이머가 만료되면 콜백 함수 foo가 `Task Queue`에 푸쉬된다. b. `bar` 함수가 호출되어 `bar` 함수의 함수 실행 컨텍스트가 생성되고 `Call Stack`에 푸쉬되고 실행되고 종료되어 `Call Stack`에서 팝된다. 이때, 브라우저가 타이머를 설정 후 시간이 경과하면 foo 함수는 아직 `Task Queue`에서 대기 중이다. 5. 전역 코드 실행이 종료되고, 전역 실행 컨텍스트가 `Call Stack`에서 팝 된다. 이로서 `Call Stack`에 아무런 실행 컨텍스트도 존재하지 않는다. 6. `EventLoop`에 의해 `Call Stack`이 비어 있음이 감지되고 `Task Queue`에서 대기 중인 콜백 함수 ₩가 이벤트 루프에 의해 `Call Stack`에 푸쉬된다. 이후, 실행되고 팝된다.

비동기 프로그래밍 [모던 자바스크립트 Deep Dive 42장]