New to JavaScript — ES2022

Episode Summary

Executive Summary: Syntax covers ES2022 JavaScript additions, focusing on practical new language features like regex indices, private class fields/methods, class fields, top-level await, ergonomic private-field checks, Array/String at(), hasOwn, and static blocks. The hosts emphasize how these features reduce boilerplate, improve ergonomics, and bring JavaScript closer to other languages while noting most are already available in modern browsers or via polyfills.

Main Topics: ES2022 language additions overview: The episode frames ES2022 as a set of mostly ergonomic, already-implemented-or-nearly-implemented features that simplify common JavaScript tasks and reduce boilerplate. Regex indices with the d flag: A new regex flag returns match start/end indices, making it easier to highlight search results or map matches back to the original string. Class ergonomics: private fields, methods, static members, and class fields: The hosts explain new class syntax including #private fields/methods, class fields, static methods, and static blocks for cleaner encapsulation and initialization logic. Top-level await: Top-level await lets modules use await outside functions, removing the need for async IIFEs and making async module initialization much simpler. Array/String at() and negative indexing: The at() method provides direct indexed access and supports negative indexes, solving a long-standing JavaScript pain point for grabbing items from the end of arrays/strings. hasOwn and private-field existence checks: Object.hasOwn and private-field 'in' checks provide cleaner ways to test direct ownership or private-field presence without traversing the prototype chain. Sponsorships, tools, and related recommendations: The episode also includes sponsor reads and side discussions of home office setup, smart locks, and temporal API enthusiasm as a future JavaScript improvement.

Key Arguments: ES2022 features are useful because they reduce boilerplate and make common patterns more readable and standardized. Regex indices add practical value when you need exact match ranges for highlighting or replacement. Private class fields and methods are safer than underscore conventions because they prevent direct external access. Class fields and static blocks bring JavaScript classes closer to the capabilities of class-based languages and reduce constructor clutter. Top-level await removes the need for async IIFEs and is especially helpful for module initialization and data fetching. Array/String at() is preferred because negative indexing is more intuitive than manual length arithmetic. Object.hasOwn is most valuable in library code where distinguishing own properties from prototype properties matters. The Temporal API is highlighted as the next major improvement for JavaScript date/time handling because it is more trustworthy and time-zone aware than Date.

Data Points: ES year discussed: ES 2022 - The episode is centered on new JavaScript proposals added in ES2022. Regex flag introduced: d - The new regex indices feature uses the d flag to return match indices. Common array/string access pattern replaced: length - 1 - Used as the old workaround for getting the last item before at() with negative indexes. Negative index example: -1 - Used with at() to access the last item in an array or string. Negative index example: -2 - Used with at() to access the second-to-last item. Top-level await pattern removed: async IIFE - The hosts describe top-level await as eliminating the need for async immediately-invoked functions. LogRocket free trial: 14 days - Mentioned in the sponsor read for LogRocket. Sanity bonus offer: double the free usage share - Mentioned in the Sanity sponsor read. Auth0 URL: a0.to/csyntax - Provided as the sponsor link for Auth0. Course coupon discount: $10 off - Wes mentions coupon code syntax for his courses.

Pivotal Quotes: "I’m mostly stoked about this new method on strings and arrays." — Scott and Wes: Opening setup for the episode’s excitement around at() and related ES2022 ergonomics. "Now we can use a weight at the top level of a file without it having to be inside of a function." — Wes: Explaining top-level await and why it simplifies module code. "Just give me this at this position." — Wes: Describing the appeal of Array/String at() and its readability.

Implications: Developers can write cleaner, more expressive JavaScript with less boilerplate. The biggest wins are in modules, arrays/strings, and classes, while Temporal promises a larger future shift in date/time handling.