A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question โ†’
Wes Bos

Wes Bos

XL5G3 Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, NX2V1, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 365: Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

0:00

LOUDNESS

Jun 28th, 2021

Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

๐Ÿ‘‡ Download Showโœ๏ธ Edit Show Notes

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals โ€” what they do, where they're at, and how you might use them.

Deque - Sponsor

Dequeโ€™s axe DevTools makes accessibility testing easy and doesnโ€™t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed.

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It's an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Show Notes

03:32 - Seven new JavaScript proposals

06:25 - JSON Modules

09:55 - Array Find From Last

11:40 - Async Do

  • https://github.com/tc39/proposal-async-do-expressions
  • Async do will allow you to group together a block of code and mark it as async.
  • No need for an iife
  • Downside to this is that it's a code block, so if you need to return any values, you'll need to jump that up a scope level.
Promise.all([
  async do {
    let result = await fetch('thing A');
    await result.json();
  },
  async do {
    let result = await fetch('thing B');
    await result.json();
  },
]).then(([a, b]) => console.log([a, b]));

14:33 - Change Array By Copy

17:48 - Temporal

18:35 - As Patterns

20:47 - Pattern Matching

<Fetch url={API_URL}>
  {props => match (props) {
    when ({ loading }) { <Loading />; }
    when ({ error }) { <Error error={error} />; }
    when ({ data }) { <Page data={data} />; }
  }}
</Fetch>

Tweet us your tasty treats!