from Hacker News

Internals of async / await in JavaScript

by spacebuffer on 9/1/23, 10:42 PM with 47 comments

• by flohofwoe on 9/2/23, 10:55 AM

  This doesn't go deep enough IMHO, I only really 'grokked' async/await (and how it differs from stack-switching coroutines) once I understood that it's just syntax sugar for a "switch-case state machine" (meaning you can emulate async/await-style in any language, even plain old C running on a heavily restricted VM like WASM).

  For instance look at the JS output of async/await Typescript when a really old JS version is used that didn't support async/await yet.

  It's switch-case all the way down:

  https://www.typescriptlang.org/play?target=1#code/FAMwrgdgxg...

• by l5870uoo9y on 9/2/23, 8:35 AM

  The whole article properly the best explanation of generators I have come across. This quote stuck out:

  > Generators are a special type of function that can return multiple pieces of data during its execution. Traditional functions can return multiple data by using structures like Arrays and Objects, but Generators return data whenever the caller asks for it, and they pause execution until they are asked to continue to generate and return more data.

  Applications of generators? I have only used Redux-Saga[1]. Can't even think of other libraries that use them, but would be interested in learning.

  [1]: https://redux-saga.js.org/

• by rzimmerman on 9/2/23, 2:02 AM

  It's obsolete now, but before async/await was part of JS proper I worked on a compile-to-JS language that handled this by compiling to callbacks: https://github.com/rzimmerman/kal

  It included try/catch support and fancy stuff, like loops. The source may be interesting for anyone interested in compilers: https://github.com/rzimmerman/kal/blob/master/source/generat...

  The Kal compiler is written in Kal, but it's supposed to be easy to read. Surprisingly the browser demo still works: http://rzimmerman.github.io/kal/demo.html

• by winrid on 9/2/23, 7:23 AM

  Thought this was going to explore V8 source code...

• by trashburger on 9/2/23, 7:19 AM

  From my (admittedly shallow) understanding, each "await" in an async function creates continuation points, is that correct? And then when the internally used Promise resolves or rejects, the function resumes from the continuation point.

• by quectophoton on 9/2/23, 8:24 AM

  The only reason I know about JS generators, and also about using them to simulate async/await, is only because I was already using JS when they were added to the language. If that hasn't been the case, I probably wouldn't even know they existed.

  I haven't used that much JS recently, but my guess is that "for await of" will make generators more widely known and used.

• by endorphine on 9/2/23, 8:24 AM

  Related Ask HN discussion with lots of insights on how async/await works: https://news.ycombinator.com/item?id=30502067

• by h1fra on 9/2/23, 11:29 AM

  Good article, love the codesanbdox! I often disregard yield because it's basically the same as having an `await for/of` or `while await` and it's not that clear for beginners.

• by _akash_h on 9/5/23, 7:17 AM

  Author of this article here.

  Thank you to everyone who read my article! Absolutely love some of the discussions going on here. My goal with the article was to peel away one layer of this abstraction and encourage curiosity in engineers who usually don't think about lower level stuff.

• by plopz on 9/2/23, 2:27 PM

  The most surprising thing that's bitten me about async/await is that the promise is immediately executed rather than being executed at the point they get awaited.