0Pricing
JavaScript Academy · 강의

비동기 반복자 — for await...of와 비동기 제너레이터

비동기 제너레이터와 for await...of로 시간에 따라 도착하는 값을 소비합니다. Symbol.asyncIterator와 간단한 비동기 파이프라인을 배웁니다.

비동기 반복자 — for await...of와 비동기 제너레이터은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

비동기 반복이 필요한 이유

목표: 나중에 도착할 수 있는 값을 소비합니다.

  • for await...of는 비동기 반복 가능 객체를 순회합니다.
  • async function*은 비동기 생성기를 만듭니다.
  • Symbol.asyncIterator는 객체를 비동기 반복 가능 객체로 표시합니다.
  • 간단한 비동기 map 예제
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 1

async function*과 for await...of

비동기 생성기(async function*)는 for await...of가 소비하는 값을 yield합니다.

// Use an async generator to yield values (could be delayed in real apps)
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      // In real code you could await a delay or I/O here
      yield i;
    }
  }

  for await (const x of countAsync(3)) {
    console.log("async value:", x);
  }
})();
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 2

수동으로 비동기 next() 호출하기

비동기 반복자에서 next()를 호출하면 { value, done }으로 resolve되는 프라미스가 반환됩니다.

// Drive an async iterator manually with await it.next()
(async function () {
  async function* two() {
    yield "A";
    yield "B";
  }
  const it = two();
  console.log(await it.next()); // { value: "A", done: false }
  console.log(await it.next()); // { value: "B", done: false }
  console.log(await it.next()); // { value: undefined, done: true }
})();
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 3

객체의 Symbol.asyncIterator

비동기 반복자를 반환하는 [Symbol.asyncIterator]()를 추가하면 객체가 for await...of와 함께 작동합니다.

// Mark a plain object as async-iterable via Symbol.asyncIterator
(async function () {
  const AsyncTwice = {
    from: function (a, b) {
      return {
        a: a, b: b,
        [Symbol.asyncIterator]: async function () {
          let step = 0;
          return {
            next: async function () {
              if (step === 0) { step = 1; return { value: a, done: false }; }
              if (step === 1) { step = 2; return { value: b, done: false }; }
              return { value: undefined, done: true };
            }
          };
        }
      };
    }
  };

  for await (const v of AsyncTwice.from("X", "Y")) {
    console.log("from object:", v);
  }
})();
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 4

비동기 map 파이프라인

비동기 생성기를 조합하여 각 단계를 기다리는 작은 파이프라인을 만듭니다.

// Async map: transform values lazily while awaiting work
(async function () {
  async function* countAsync(n) {
    for (let i = 1; i <= n; i = i + 1) {
      yield i;
    }
  }

  async function* asyncMap(iterable, fn) {
    for await (const v of iterable) {
      // fn can be async; await its result
      const out = await fn(v);
      yield out;
    }
  }

  const doubled = asyncMap(countAsync(4), async function (x) {
    // simulate async transform (no real delay for demo)
    return x * 2;
  });

  const collected = [];
  for await (const v of doubled) {
    collected.push(v);
  }
  console.log("doubled async:", collected);
})();
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 5

좋은 습관

팁:

  • for await...of에는 비동기 반복 가능 객체(Symbol.asyncIterator)가 필요합니다.
  • async function*을 사용하면 비동기 생성기를 쉽게 정의할 수 있습니다.
  • 각 next()를 await해야 하므로, 응답성을 유지하려면 작업을 작게 나누십시오.
비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 6

비동기 반복 가능 객체 기초 퀴즈

빠른 확인: 비동기 반복 가능 객체의 요구 사항

비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 7

복습

복습: async function*과 yield를 사용해 비동기 생성기를 만듭니다. for await...of로 순회하거나 next()를 수동으로 기다립니다. 도우미 생성기로 작은 비동기 파이프라인을 만듭니다.

비동기 반복자 — for await...of와 비동기 제너레이터 — 일러스트레이션 8

자주 묻는 질문

“비동기 반복자 — for await...of와 비동기 제너레이터” 강의는 무료인가요?

네 — “비동기 반복자 — for await...of와 비동기 제너레이터” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“비동기 반복자 — for await...of와 비동기 제너레이터”에서 뭘 배우나요?

비동기 제너레이터와 for await...of로 시간에 따라 도착하는 값을 소비합니다. Symbol.asyncIterator와 간단한 비동기 파이프라인을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 3번째 강의입니다.

“비동기 반복자 — for await...of와 비동기 제너레이터” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 반복 가능 프로토콜과 for...of
  2. 제너레이터 함수, yield와 작은 파이프라인
  3. 비동기 반복자 — for await...of와 비동기 제너레이터
← JavaScript Academy(으)로 돌아가기