What is `async*`?

Question

This example on MDN explains Symbol.asyncIterator.

 const myAsyncIterable = {
    async* [Symbol.asyncIterator]() {
        yield "hello";
        yield "async";
        yield "iteration!";
    }
};

(async () => {
    for await (const x of myAsyncIterable) {
        console.log(x);
        // expected output:
        //    "hello"
        //    "async"
        //    "iteration!"
    }
})();

My problem is what does async* mean in the code?

[generator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) — mplungjan, Sep 01 '21 at 20:13
and [async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) — max, Sep 01 '21 at 20:14
`async*` is used in your example because it is an async function (see [What is the meaning of the `async` keyword?](https://stackoverflow.com/q/49636379/215552) as part of a method definition in an object literal, which doesn't require the `function` keyword. — Heretic Monkey, Sep 01 '21 at 20:25
While all of the linked questions are _related_, I don't agree that this question is a duplicate of any of them. None of them address the specific use case of `async*` and `Symbol.asyncIterator`. — Etheryte, Sep 01 '21 at 20:26
@HereticMonkey it's an async *generator*, not just an async function. — VLAZ, Sep 01 '21 at 20:28
@VLAZ Technically, it's an async generator function. What's your point? I was continuing my comment right above that one, where I mention `function*`. — Heretic Monkey, Sep 01 '21 at 20:29
@HereticMonkey generator functions and functions are definitely not the same in terms of how they work. The terminology is not really interchangeable. And the async iterator protocol is also not just something you can say "it's just a function". Your comment *vastly* oversimplified things. — VLAZ, Sep 01 '21 at 20:32
Guys I know very good async_await function and genrator function but i don't understand "async*" why * ?? — , Sep 01 '21 at 20:36
It's basically the same in a different context. You can't use them interchangeably. `async*` can only be used when using shorthand for creating methods on object literals or classes. — Heretic Monkey, Sep 01 '21 at 20:58
@VadimOrlov212 MDN is a wiki. Feel free to submit a modification. But your "correct code" looks an awful lot like the code I see on MDN at the link provided by the OP. It also works [in a fiddle](https://jsfiddle.net/0wj7mpat/). — Heretic Monkey, Sep 01 '21 at 21:01

score 2 · Accepted Answer · answered Sep 01 '21 at 20:55

The example given makes use of shorthand for creating methods in object literals or classes. Consider the following object definition:

const iHaveAMethod = {
  myMethod() {
    return "cool!";
  }
};
console.log(iHaveAMethod.myMethod()); // cool!

It also uses bracket syntax to define a method using a symbol.

const iAmASymbol = Symbol("neat");
const iHaveAMethod = {
  [iAmASymbol]() {
    return "cool!";
  }
};
console.log(iHaveAMethod[iAmASymbol]()); // cool!

It creates a method on an object that is a generator (using the * syntax).

const iHaveAMethod = {
  * myMethod() {
    yield "cool!";
  }
};
console.log(iHaveAMethod.myMethod().next().value); // cool!

Finally, it's an asynchronous method, and so is marked with async.

const iHaveAMethod = {
  async* myMethod() {
    yield Promise.resolve("cool!");
  }
};
iHaveAMethod.myMethod().next().then(val => console.log(val.value)); // cool!

Combine it with the bracket syntax, and you get async*:

const iAmASymbol = Symbol("neat");
const iHaveAMethod = {
  async* [iAmASymbol]() {
    yield Promise.resolve("cool!");
  }
};
iHaveAMethod[iAmASymbol]().next().then(val => console.log(val.value)); // cool!

That explains how the async* got on there. Async iterators and why you'd want an async generator is a whole different ball of wax.

One small nitpick, `yield Promise.resolve(value)` is the same as `yield value` in an async context. Very nice explanation otherwise. — Etheryte, Sep 01 '21 at 21:35

What is `async*`?

1 Answers1