Modern Javascript: Everything you missed over the last 10 years (2020)

Re:Modern Javascript: Everything you missed over the last 10... by epaulson on Saturday May 15, 2021 @02:32PM (#27167695)

I'm years behind on Javascript (I'm circa 'AJAX is new' in my knowledge) but I've been having good luck catching up using the Babel REPL with small snippets to just see how the new features get translated into the Javascript I know. Seeing what the compiler renames is a good way to understand the new scoping rules, etc.

It's been especially helpful for yield and async/await, but I wonder if there's a bug in Babel with async/await. Just using the code sample from the article:

  function fetchUserName() {
    return new Promise(resolve => setTimeout(resolve, 500))
  }
      
  async function withAsync() {
    print("withAsync: fetching...")
    await fetchUserName()
    print("withAsync: done")
  }
  await withAsync()

when I set the target to be 'ie 6', so hopefully I get output that's only the Javascript that I know, most of this gets translated to (a lot of) Javascript that looks normal for 2005 Javascript - except the last 'await' line is still there. Is that a bug/limitation in Babel or was 'await' present in Javascript from years ago?

[ Parent | on HN ]

Re:Modern Javascript: Everything you missed over the last 10... by dclowd9901 on Saturday May 15, 2021 @03:19PM (#27168045)

I don't know what the REPL you're running does with top level functions, but my guess is that an `await` needs to run within a function that is declared `async`. The reason (if so) would be that then babel could then transpile the function appropriately into a Promisory function. At the top level, what function would be translated?

[ Parent | on HN ]

Re:Modern Javascript: Everything you missed over the last 10... by mweberxyz on Saturday May 15, 2021 @03:35PM (#27168202)

Top-level await is very, very new and requires ES modules -- you can only use this feature without warnings recently in Node 15. For the foreseeable future, the final line should be replaced with:

    withAsync()
       .then(() => print("done")
       .catch((err) => console.error(err);

[ Parent | on HN ]

Re:Modern Javascript: Everything you missed over the last 10... by sandrot on Saturday May 15, 2021 @04:54PM (#27168926)

You're right, thank you for the explanation. My REPL runs the code in the textarea in an anonymous Async function, which is why top level async works in my examples.

[ Parent | on HN ]