1. 개발자를 위한 웹 기술
  2. JavaScript
  3. JavaScript 참고서
  4. 문 및 선언
  5. async function*

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

async function*

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020년 1월⁩.

async function* 선언은 주어진 이름으로 새 비동기 제너레이터 함수의 binding을 생성합니다.

또한 async function* 표현식을 사용해서 비동기 제너레이터 함수를 선언할 수 있습니다.

시도해 보기

async function* foo() {
  yield await Promise.resolve("a");
  yield await Promise.resolve("b");
  yield await Promise.resolve("c");
}

let str = "";

async function generate() {
  for await (const val of foo()) {
    str += val;
  }
  console.log(str);
}

generate();
// Expected output: "abc"

구문

js
async function* name(param0) {
  statements
}
async function* name(param0, param1) {
  statements
}
async function* name(param0, param1, /* …, */ paramN) {
  statements
}

참고 : 비동기 제너레이터 함수는 그에 대응하는 화살표 함수 형태가 없습니다.

참고 : function과 *는 별개의 토큰이므로 공백이나 줄바꿈 문자로 분리할 수 있습니다. 하지만 async와 function 사이에는 줄바꿈 문자가 올 수 없습니다. 그렇지 않으면 세미콜론이 자동으로 삽입되어, async는 식별자가 되고 나머지는 function* 선언이 됩니다.

매개변수

name

함수의 이름.

param Optional

함수의 형식 매개변수 이름입니다. 매개변수 구문은 함수 레퍼런스를 확인하세요.

statements Optional

함수 본문을 구성하는 명령문입니다.

설명

async function* 선언은 AsyncGeneratorFunction 객체를 생성합니다. 비동기 제너레이터 함수가 호출될 때마다 비동기 반복자 프로토콜을 따르는 새로운 AsyncGenerator 객체를 반환합니다. next()를 호출할 때마다 반복자 결과 객체로 이행되는 Promise를 반환합니다.

비동기 제너레이터 함수는 비동기 함수와 제너레이터 함수의 기능을 결합한 것입니다. 함수 본문 내에서 await와 yield 키워드를 모두 사용할 수 있습니다. 이를 통해 await로 비동기 작업을 편리하게 처리하면서, 제너레이터 함수의 지연 실행 특성을 활용할 수 있습니다.

비동기 제너레이터에서 프로미스가 yield되면, 이터레이터 결과 프로미스의 최종 상태는 yield된 프로미스의 상태와 일치하게 됩니다.

예를 들어

js
async function* foo() {
  yield Promise.reject(new Error("failed"));
}

foo()
  .next()
  .catch((e) => console.error(e));

yield된 프로미스가 거부되면 이터레이터 결과 또한 거부되기 때문에, Error: failed가 로그될 것입니다. 비동기 제너레이터 이행 결과의 value 속성은 또 다른 프로미스가 아닙니다.

async function* 선언은 function 선언과 비슷하게 동작합니다 — 범위의 최상단으로 호이스팅되어 범위 내 어디서든 호출할 수 있으며, 특정 맥락에서만 다시 선언할 수 있습니다.

예제

비동기 제너레이터 함수 선언

비동기 제너레이터 함수는 각 yield 단계가 동기적이더라도 항상 결과 프로미스를 생성합니다.

js
async function* myGenerator(step) {
  await new Promise((resolve) => setTimeout(resolve, 10));
  yield 0;
  yield step;
  yield step * 2;
}

const gen = myGenerator(2);
gen
  .next()
  .then((res) => {
    console.log(res); // { value: 0, done: false }
    return gen.next();
  })
  .then((res) => {
    console.log(res); // { value: 2, done: false }
    return gen.next();
  })
  .then((res) => {
    console.log(res); // { value: 4, done: false }
    return gen.next();
  })
  .then((res) => {
    console.log(res); // { value: undefined, done: true }
    return gen.next();
  });

비동기 제너레이터 함수를 사용하여 일련의 파일 읽기

이 예제에서는 Node의 fs/promises 모듈을 사용하여, 일련의 파일들을 읽고 요청이 있을 때만 그 내용에 접근합니다.

js
async function* readFiles(directory) {
  const files = await fs.readdir(directory);
  for (const file of files) {
    const stats = await fs.stat(file);
    if (stats.isFile()) {
      yield {
        name: file,
        content: await fs.readFile(file, "utf8"),
      };
    }
  }
}

const files = readFiles(".");
console.log((await files.next()).value);
// Possible output: { name: 'file1.txt', content: '...' }
console.log((await files.next()).value);
// Possible output: { name: 'file2.txt', content: '...' }

명세서

Specification
ECMAScript® 2026 Language Specification
# sec-async-generator-function-definitions

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content