[javascript] 비동기 함수의 동시 실행과 순차 실행 비교

이번에는 자바스크립트에서 비동기 함수를 실행하는 방법과 동시 실행과 순차 실행의 차이를 알아보겠습니다.

비동기 함수란 무엇인가요?

비동기 함수는 다른 작업을 수행하는 동안에도 프로그램이 계속 실행될 수 있도록 하는 함수를 말합니다. 대표적인 비동기 함수로는 setTimeout()fetch() 등이 있습니다.

동시 실행

동시 실행은 여러 비동기 함수들이 동시에 실행되어 결과를 기다리는 것을 말합니다. 예를 들어, 여러 개의 이미지를 동시에 다운로드하거나 여러 개의 API를 동시에 호출하는 경우에 사용됩니다.

async function concurrentExecution() {
  const result1 = await fetchDataFromAPI1();
  const result2 = await fetchDataFromAPI2();
  // 두 함수가 동시에 실행됨
  console.log(result1, result2);
}

순차 실행

반면에, 순차 실행은 여러 비동기 함수들을 순차적으로 실행하여 하나의 함수가 완전히 실행된 후에 다음 함수를 실행하는 것을 말합니다. 이런 방식은 각 함수의 실행이 이전 함수의 결과에 의존하는 경우에 사용됩니다.

async function sequentialExecution() {
  const result1 = await fetchDataFromAPI1();
  const result2 = await fetchDataFromAPI2();
  // 함수가 순차적으로 실행됨
  console.log(result1, result2);
}

차이점

동시 실행은 각 함수가 독립적으로 실행되므로, 속도가 빠를 수 있지만 실행 순서가 보장되지 않는다는 단점이 있습니다. 반면에 순차 실행은 각 함수가 이전 함수의 결과에 의존하기 때문에 실행 순서가 보장되지만, 앞선 함수의 실행이 끝나야 다음 함수가 실행됨으로 속도가 느릴 수 있습니다.

이러한 차이를 고려하여 프로젝트의 요구사항에 맞게 적절히 선택하여 사용해야 합니다.

결론

비동기 함수의 동시 실행과 순차 실행은 각각 독립적으로 실행되는 것과 실행 순서가 보장되는 것 사이의 차이를 가지고 있습니다. 프로젝트의 요구에 따라 적절한 방식을 선택하여 사용해야 합니다.

이상으로 자바스크립트에서 비동기 함수의 동시 실행과 순차 실행에 대한 비교를 마치도록 하겠습니다. 감사합니다.

참고 문헌


이 글은 JavaScript.infoMDN Web Docs 등을 참고하여 작성하였습니다.