Skip to content

Software Engineer at Heydoc

What's new in ECMAScript 2021

This week’s TC39 meeting concluded with a complete list of ECMAScript 2021 features. Similarly, how I did it in 2016, 2017, 2018, 2019 and 2020, let’s have a look at what’s coming this year. I also prepared for you a few code examples.

String.prototype.replaceAll by Peter Marshall, Jakob Gruber and Mathias Bynens #

To replace all string occurrences, we need to use a combination of String.prototype.replace and global regexp. The String.prototype.replaceAll by Peter Marshall, Jakob Gruber and Mathias Bynens simplify this. The popularity of “How to replace all occurrences of a string in Javascript?” thread on StackOverflow proves this feature’s need in the language.

const string = "it-is-just-a-test";

// instead of doing this
string.replace(/-/g, "_")
// "it_is_just_a_test"

// in ES2021 we can do
string.replaceAll("-", "_")
// "it_is_just_a_test"

Promise.any by Mathias Bynens, Kevin Gibbons and Sergey Rubanov #

The Promise.any joins the list of Promise combinators in this year’s specification. “Promise combinators explained” that I published some time ago elaborates about the core differences between them. Use Promise.any when you want to handle the first promise that fulfils.

const API = "https://api.github.com/users"

Promise.any([
  fetch(`${API}/pawelgrzybek`),
  fetch(`${API}/gabriel403`)
])
  .then(response => response.json())
  .then(({name}) => console.log(`Cool dude is: ${name}`))
  .catch(error => console.error(error));

WeakRefs by Dean Tribble and Sathya Gunasekaran #

WeakRefs proposal by Dean Tribble and Sathya Gunasekaran brought to the language two new contructors — WeakRef and FinalizationRegistry. These new features are much more complicated, lower-level language concepts.

WeakRef #

When we assign an object to a variable, it points to the piece of memory where the value of this object is stored (strong reference). In case the program no longer references this object, garbage collector destroys it and reclaims the memory. An instance of WeakRef creates a reference to a given object that returns it if it is still in the memory or undefined in case the target object has been garbage collected.

const obj = { spec: "ES2021" };
const objWeakRef = new WeakRef(obj);

// do something cool

objWeakRef.deref();
// returns obj in case it is still in memory
// returns undefined in case it has been garbage collected

FinalizationRegistry #

An instance of FinalizationRegistry triggers a callback function after a registered target object has been garbage collected.

const obj = { spec: "ES2021" };
const registry = new FinalizationRegistry(value => {
    console.log(`The ${value} object has been garbage collected.`)
});
registry.register(obj, "ECMAScript 2021");

// perform some action that triggers garbage collector on obj
// The ECMAScript 2021 object has been garbage collected.

Be careful though — we should avoid using them as per proposal’s author recommendation. Both of these features rely on garbage collector implementation that varies based on engine and engine’s version.

Logical Assignment Operators by Justin Ridgewell #

As the name suggests, Logical assignments proposal is the combination of logical operators (&&, || and ??) and assignment operator (=). Convenient add-on to the language! Have a look.

// set a to b only when a is truthy
a &&= b;
// set a to b only when a is falsy
a ||= b;
// set a to b only when a is nullish
a ??= b;

Numeric separators by Sam Goto and Rick Waldron #

Large numbers are hard to read. Thanks to Rick Waldron, we can now separate the digits group using underscores (_, U+005F). This feature is well-known from other programming languages like Java, Python, Perl, Ruby, Rust, Julia, Ada, C#.

const population = 37_653_260

Comments

  • t
    test

    // set a to b only when a is nullish
    a ||= b;

    typo

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • Pawel Grzybek
      Pawel Grzybek

      Fixed. Thanks 😅

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!
  • s
    scott beeker

    Thanks for sharing

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
  • r
    rafark

    The logical assignment operator, I think it doesn’t make sense. Shouldn’t b be assigned to a? The assignment operator always assigns the expression on the right to the variable on the left. Changing this order brings confusion to the language imo.

    👆 you can use Markdown here

    Your comment is awaiting moderation. Thanks!
    • R
      Rotimi

      honestly. in a &&= b, I really expected a to be truthy if both a and b are truthy, and for a || b, a becomes falsy only when both a and be are falsy

      👆 you can use Markdown here

      Your comment is awaiting moderation. Thanks!

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!