자바스크립트 비동기 함수의 동작 원리

10 Sep 2023

javascript

자바스크립트는 싱글 스레드 언어로, 한 번에 한 가지 작업만 처리할 수 있습니다. 그러나 자바스크립트는 비동기 함수를 통해 동시에 여러 작업을 처리할 수 있는 기능을 제공합니다. 이러한 비동기 함수의 동작 원리를 살펴보겠습니다.

콜백 함수

자바스크립트의 비동기 함수는 주로 콜백 함수를 사용하여 작업을 완료할 때까지 기다리지 않고 다른 작업을 수행할 수 있는 구조를 만듭니다. 비동기 함수는 비동기적으로 실행되며, 작업이 완료되면 콜백 함수가 호출됩니다. 예를 들어, setTimeout 함수는 주어진 시간이 경과한 후에 콜백 함수를 실행하는 비동기 함수입니다.

setTimeout(() => {
  console.log('비동기 함수 실행');
}, 1000);
console.log('다른 작업 실행');

위의 코드에서 setTimeout 함수는 1초 후에 콜백 함수를 실행합니다. 그러나 setTimeout 함수는 비동기적으로 실행되므로, 콜백 함수가 실행되기 전에 다른 작업이 수행됩니다.

결과는 다음과 같습니다:

다른 작업 실행
비동기 함수 실행

이벤트 루프

비동기 함수의 동작 원리를 이해하기 위해 이벤트 루프라는 개념을 알아야 합니다. 이벤트 루프는 자바스크립트 엔진이 비동기 작업을 관리하는 방식입니다. 이벤트 루프는 계속해서 실행되며, 작업 큐에서 작업을 가져와 실행합니다.

이벤트 루프는 세 가지 주요 구성 요소로 이루어져 있습니다:

호출 스택 (Call Stack): 현재 실행 중인 함수 호출을 기록하는 스택입니다.
작업 큐 (Task Queue): 비동기 작업의 콜백 함수가 대기하는 큐입니다.
이벤트 루프 (Event Loop): 호출 스택과 작업 큐를 확인하여, 호출 스택이 비어 있을 때 작업 큐의 작업을 호출 스택으로 이동시킵니다.

이벤트 루프의 동작은 다음과 같습니다:

코드의 비동기 함수가 실행되며, 해당 작업은 호출 스택에 추가됩니다.
비동기 함수에서 발생한 콜백 함수는 작업 큐에 추가됩니다.
호출 스택이 비어 있을 때, 작업 큐의 콜백 함수를 호출 스택으로 이동시킵니다.

프로미스와 async/await

ES6부터는 프로미스와 async/await라는 비동기 처리 패턴이 도입되었습니다. 프로미스는 비동기 작업의 결과를 나타내는 객체이며, then 메서드를 통해 콜백 함수를 등록할 수 있습니다. async/await는 프로미스를 더 쉽게 다룰 수 있는 문법적인 편의성을 제공합니다.

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncFunction() {
  console.log('비동기 함수 시작');
  await delay(1000);
  console.log('비동기 함수 종료');
}

console.log('다른 작업 시작');
asyncFunction();
console.log('다른 작업 종료');

위의 코드에서 asyncFunction은 delay 함수를 비동기적으로 호출한 후에 작업을 계속합니다. await 키워드는 프로미스가 해결될 때까지 함수의 실행을 일시 정지시킵니다.

결과는 다음과 같습니다:

다른 작업 시작
비동기 함수 시작
다른 작업 종료
(1초 후)
비동기 함수 종료

결론

자바스크립트의 비동기 함수는 콜백 함수를 통해 작업이 완료될 때까지 기다리지 않고 동시에 다른 작업을 수행할 수 있습니다. 이를 가능하게 하는 이벤트 루프와 프로미스들은 자바스크립트 비동기 처리의 핵심 개념입니다. async/await 문법을 사용하면 더욱 명확하고 간편한 비동기 코드를 작성할 수 있습니다.