인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

Daniel Yang님의 프로필 이미지

작성한 질문수

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

3. async와 await

병령처리 하지만 동기화와 같은 출력값

해결된 질문

작성

·

60

·

수정됨

0

const workA = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`workA`);
    }, 5000);
  });
};

const workB = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`workB`);
    }, 3000);
  });
};

const workC = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`workC`);
    }, 10000);
  });
};

const start = async () => {
  try {
    let results = await Promise.all([workA(), workB(), workC()]);
    console.log(results);
    results.forEach((res) => console.log(res));
  } catch (err) {
    console.log(err);
  }
};

[10:01] 강의 내용 보면 workA가 5초 workB가 3초, workC가 10초인데, 결국 출력 되는 값을 보면 동시에 출력이 됩니다.

그리고 순서도 A, B, C 순입니다.

let resultA = await workA();
let resultB = await workB();
let resultC = await workC();
console.log(resultA);
console.log(resultB);
console.log(resultC);

물론 실행시간의 차이는 있지만, 실직적으로 프로그램에 표기 되는 값은 바로 위에 있는 코드예제에서 보여주신 A, B, C랑 같은데, 병령처리라면 시간이 짧은 B가 실행되고 그 다음에 A, 그 다음 C가 아웃풋으로 나와야 하는거 아닌가요??

답변 2

0

효빈 Hyobin님의 프로필 이미지
효빈 Hyobin
지식공유자

안녕하세요 Daniel Yang님 🙂 질문주셔서 감사합니다.

Promise.all() 은, 비동기 처리의 장점을 가지고 있으면서도 작업의 실행 순서를 보장한다는 특징이 있습니다. 그렇기 때문에 A, B, C가 순차적으로 실행되며, 가장 오래 걸리는 작업인 C 작업이 완료되면, 즉 10초 후에 실행 순서대로 작업들이 출력 됩니다.

감사합니다.

 

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. Daniel Yang님.

질문해주신 부분은 JavaScript의 비동기 작업 처리 방식 및 Promise.all()의 동작에 대한 내용입니다.

Promise.all()의 동작

Promise.all()은 주어진 프로미스 배열의 모든 프로미스를 병렬로 실행하고, 모든 프로미스가 완료되면(해결되면) 결과 배열을 반환합니다. 비동기 작업을 병렬로 실행해도, 결과를 배열로 받을 때는 프로미스가 배열에 명시된 순서대로 모아집니다.
따라서, 코드에서 보신 것처럼 ['workA', 'workB', 'workC'] 순서로 결과가 출력됩니다.

순서가 보장되는 이유

  • Promise.all([workA(), workB(), workC()])는 세 작업을 동시에 시작합니다. workB가 먼저 완료되더라도 결과는 workB가 배열의 두 번째 요소로 저장되기 때문에, 최종적으로 workA, workB, workC의 순서로 출력됩니다.

병렬 처리에서 실행되고 완료되는 순서는 작업의 개별 지연 시간에 따라 다르겠지만, Promise.all()은 모든 작업 완료 후 결과를 결합하기 때문에 처음 정의된 순서를 유지합니다.

다음 링크에서 비슷한 주제에 대한 설명을 확인하실 수 있습니다:
- 비동기 처리와 Promise.all()의 이해

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.