ES2021/22 and Beyond, Whats (es.)Next?

Some examples and excerpts of the latest ECMA specifications.

by Gion Kunz

Gion Kunz

  • Angular GDE since 2018
  • Front-end developer, web standards advocate
  • Specialized in spa development using Angular
  • Onsite ramp-ups, coaching and implementation support in projects
  • Author of the book "Mastering Angular Components"
  • Frequent speaker at conferences and meetups
  • Teacher for web development and UX engineering at the SAE Institute in Zurich
  • Tutor at O'Reilly Safari Online Training
  • Contributor on the Angular project, author of Chartist.js library

Founder, UI Developer, UX Enthusiast at syncrea GmbH

If I am not in the Web universe, I ❤ to observe the real one.

M31 Andromeda Galaxy, ~2.5 million light-years from Earth and the nearest large galaxy to the Milky Way

photon_junkie

  • ECMAScript 2022

    • Class field declarations

    • Private methods and fields

    • Static public methods and fields

    • .at() for Indexed Collections

  • ECMAScript 2020

    • BigInt

    • Dynamic Imports

    • Nullish Coalescing

    • Optional Chaining

    • String#matchAll

  • ECMAScript 2021

    • String#replaceAll 🥳

    • WeakRef

Overview

ECMA / TC39 Process

  • TC39 is a diverse group of members working with JavaScript under ECMA International
  • TC39 collaborates with the community to maintain and evolve the ECMAScript specification
  • The TC39 process allows making changes in the ECMAScript specification using five regulated stages
  • TC39 must approve each stage of the TC39 process for any change in the specification
  • New editions of the specification are delivered every year
  • Stage 0 represents an initial idea for addition or change to the specification
  • Stage 1 is a formal proposal describing a problem and suggesting a proper solution
  • Stage 2 is an initial draft of the proposal specification
  • Stage 3 represents the draft when it’s almost final but ready for last feedback
  • Stage 4 is when the proposal specification completely ready and included within the next edition

ECMAScript 2020

BigInt

const aBigInteger = 98765432123456789n;
const alsoAbigInteger = BigInt('98765432123456789');
console.log(typeof aBigInteger) // bigint

> edit on stackblitz

DynamicImports

async function getXfromModule() {
  const m = await import('./module.js');
  return m.x;
}

getXfromModule().then(console.log);

> edit on stackblitz

Nullish Coalescing

const nullValue = null;
const emptyText = ''; // falsy
const someNumber = 42;

const valA = nullValue ?? 'default for A';
const valB = emptyText ?? 'default for B';
const valC = someNumber ?? 0;

console.log(valA); // 'default for A'
console.log(valB); // ''
console.log(valC); // 42

> edit on stackblitz

Optional Chaining

const adventurer = {
  name: 'Alice',
  cat: { name: 'Dinah' }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

> edit on stackblitz

String#matchAll

const regexp = /foo[a-z]*/g;
const str = 'table football, foosball';
let match;

while ((match = regexp.exec(str)) !== null) {
  console.log(`Found ${match[0]} @ ${match.index}`);
}

> edit on stackblitz

Before matchAll

String#matchAll

const regexp = /foo[a-z]*/g;
const str = 'table football, foosball';

for (const match of str.matchAll(regexp)) {
  console.log(`Found ${match[0]} @ ${match.index}`);
}

> edit on stackblitz

After matchAll

ECMAScript 2021

String#replaceAll 🥳

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

console.log(replaceAll('oOoOoOoOoOo', 'O', '.'));

> edit on stackblitz

Before replaceAll

String#replaceAll 🥳

console.log('oOoOoOoOoOo'.replaceAll('O', '.'));

> edit on stackblitz

After replaceAll

WeakRef

export function cached(getFresh = () => null) {
  let ref;
  return () => {
    if (!ref || !ref.deref()) {
      ref = new WeakRef(getFresh());
    }
    return ref.deref();
  };
}

const cachedData = cached(() => Array(1000).fill(1));
console.log(cachedData());
console.log(cachedData() === cachedData());

> edit on stackblitz

ECMAScript 2022

Class field declarations

export class Fruit {
  name;
  sweet = true;
  color;
}

const banana = new Fruit();
console.log(banana);
// Fruit {sweet: true}

> edit on stackblitz

Private and static methods and fields

export class Singleton {
  static #instance;

  constructor() {
    return Singleton.#instance ??= this;
  }

  static instance() {
    return new Singleton();
  }
}

const s1 = new Singleton();
const s2 = new Singleton();
const s3 = Singleton.instance();
console.log([s1, s2, s3].every(s => s === s1)); // true

> edit on stackblitz

.at() for Indexed Collections

// Before
const names = ['Joe', 'Doe', 'Moe'];
console.log(names[names.length - 1]);
// Or
console.log([...names].pop());

// After
console.log(names.at(-1));

> edit on stackblitz

Let's create together.

Thanks!

@GionKunz