ES2021

FEATURES REVIEW

Logical Assignment Operators

// Before
if (!x) {
  x = y;
}

// or
x = x || y;

// or
x || (x = y);

// After
x ||= y;

// Before
if (x) {
  x = y;
}

// or
x = x && y;

// or
x && (x = y);

// After
x &&= y;

// Before
if (x === undefined || x === null) {
  x = y;
}

// or
if (x == null) {
  x = y;
}

// or
x = x ?? y;

// or
x ?? (x = y);

// After
x ??= y;

Can I Use?: Yes

Numeric Separators

// Before
const amount = 1000000;

// After
const amount = 1_000_000; // One Million Dollars!

// Before
const amount = 12345;

// After
const amount = 123_45; // In pennies, or $123.45

Can I Use?: Yes

String replaceAll()

// Before
'a-b-c'.replace('-', '_'); // → a_b-c

'a-b-c'.replace(/-/g, '_'); // → a_b_c

// After
'a-b-c'.replaceAll('-', '_'); // → a_b_c

Can I Use?: Yes

AggregateError

const err = new AggregateError([
  new Error('some error'),
  new Error('some other error')
], 'Custom Error Message');

err.name; // → AggregateError
err.message; // → Custom Error Message
err.errors.length // → 2
err.errors; // → [ Error: some error, Error: some other error ]

Can I Use?: Yes

Promise.any

Promise.any([
  Promise.reject(1),
  Promise.resolve(2),
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(3), 100);
  })
]).then(res => console.log(res));
// → 2

const promise = Promise.any([Promise.reject()]);
// or
const promise = Promise.any([]);

promise.catch(err => console.log(err));
// → AggregateError: All promises were rejected

Can I Use?: Safari 14 😢

WeakRefs

let target = {};
const ref = new WeakRef(target);
const anonRef = new WeakRef({ target });

ref.deref() === target; // → true
anonRef.deref().target === target; // → true

// Garbage Collected ♻

ref.deref() === target; // → true
anonRef.deref() === void 0; // → true

target = [];

// Garbage Collected ♻

ref.deref() === void 0; // → true

Can I Use?: Safari 14 😢

FinalizationRegistry

const anonRef = new WeakRef({ anon: true });
const registry = new FinalizationRegistry(description => {
  console.log(`cleaned up ${description}`);
});

registry.register(anonRef, "example anon ref");

// Garbage Collected ♻

// → cleaned up example anon ref