[JS] 동기와 비동기

동기(Synchronous)

• 순차적으로 태스크를 수행
• 어떤 작업이 수행중이라면 뒤의 작업은 대기 상태
• 즉, 블로킹이 발생

 

비동기(Asynchronous)

• 병렬적으로 태스크를 수행
• 동기 방식과 달리 완료 순서가 보장되지 않음

 

자바스크립트는 기본적으로 한 번에 하나의 작업을 수행하는 동기식 언어이다.

그것은 자바스크립트 엔진의 구조를 이해하면 알 수 있다.

 

자바스크립트 엔진은 메모리 힙과 콜 스택으로 구성된다.

메모리 힙은 변수와 객체의 메모리 할당을 담당하는 곳이며 콜 스택은 함수가 호출이 될 때마다 순서대로 쌓이는 곳이다.

가장 최근에 쌓인 것부터 실행되어 종료되기 때문에 LIFO 구조이며 동기적으로 동작한다.

 

자바스크립트의 비동기적 실행

기본적으로 동기적으로 동작하는 자바스크립트지만 웹 브라우저의 성능을 위해 비동기적으로도 동작할 수 있어야 한다.

예를들어, 화면을 전환하면서 HTTP 요청이나 여러 이벤트들을 동시에 처리할 수 있어야 하기 때문이다.

 

이를 위해 브라우저는 자바스크립트 엔진 외에도 비동기 처리를 위한 web API를 제공한다.

또한, 이를 제어하기 위해 이벤트 루프, 이벤트 큐(콜백 큐)가 존재한다.

 

비동기 동작 예시

대표적인 비동기 함수인 setTimeout()를 사용한 예제를 통해 비동기 동작 방식을 알아보자

function asyncAdd(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000);
}

console.log("hi");
asyncAdd(3, 4, (res) => {
  console.log(`결과 : ${res}`);
});
console.log("bye");

// hi 
// bye 
// 결과 : 7

 

1. 위 코드가 시작되자마자 main context가 콜 스택에 쌓인다.
2. console.log("hi")가 콜 스택에 push되고 실행된다.
3. console.log("hi")가 종료되고 콜 스택에서 pop된다.
4. asyncAdd()가 콜 스택에 push되고 실행된다.
5. setTimeout() 및 콜백 함수가 콜 스택에 push되고 실행된다.
6. setTimeout()은 비동기 api이므로 webAPIS에서 별도로 처리하여 콜 스택에서는 바로 pop된다.
7. asyncAdd()가 종료되고 콜 스택에서 pop된다.
8. console.log("bye")가 콜 스택에 push되고 실행된다.
9. console.log("bye")가 종료되고 콜 스택에서 pop된다.
10. webAPIS에서 3초의 카운트가 끝나면 콜백함수를 콜백 큐에 push된다.
11. 이벤트 루프는 콜 스택에 main context를 제외한 다른 수행중인 함수가 없는지 확인한다.
12. 없다면 콜백 큐에 있는 함수를 콜 스택에 push하고 실행한다.
13. 즉, 결과를 출력하고 종료되어 콜 스택에서 pop된다.
14. 모든 실행이 끝나면 main context가 pop되며 프로그램이 종료된다.

---