ES 2021 Features

ES 2021 is the latest version of the .. the most popular programming language in the world~

There are only a handful of features in this iteration. (five of them to be exact, that's literally "handful" cause there are five fingers in a hand)

Now let's go through them one by one.

1. String's replaceAll method:

The replaceAll method will replace all the occurrences of the searched string (first arg) with the new string (second arg).

'Hello'.replaceAll('l', 'L') // 'HeLLo'

This one should be pretty basic to understand for experienced programmers.

2. Promise.any

This is a static method of the Promise global object. It takes an array of Promise objects as arg. Then...

It will resolve whenever one of these Promise objects resolves. On the other hand, it will reject ONLY WHEN ALL of these Promise objects reject.

Here's some code:

const myFetches = Promise.any([ 
  fetch('/route-1'), 
  fetch('/route-2') 
])

myFetches.then(r => console.log(r))

If you've used Promise.all, this is basically the opposite of that in terms of when to resolve and when to reject.

3. WeakRef

This is a new class for creating weak references to objects, that is, references that won't stop the referenced objects to be garbage-collected.

That is not to say that whenever a WeakRef is pointing to an object, that object will get garbage-collected. It's just that the WeakRef won't stop the garbage collector from doing so. (though there might be other references stopping the garbage collector to erase the object in question.)

You probably don't have a need to ever use this. But here's how you create a weak reference:

let obj = { name: "Andy" }
const myRef = new WeakRef(obj)

Then, you can get the wrapped object like this:

myRef.deref() // { name: "Andy" }

If the garbage collector has already removed it from memory, it would return undefined instead.

4. Logical Assignment Operators

This is a set of operators, basically combining logical operators with assignment.

They look like this:

a ||= b
a &&= b
a ??= b

I'm just going to explain how the first one works, you can basically guess what the other two do.

Let's say we got two variables:

let a = true
let b = false

And then we assign b to a using the ||= operator:

a ||= b

You can treat this as a regular assignment statement, but with a twist. The assignment will only be successful if a is false. But a isn't in this example, so a will still be true at the end.

Yeah, that's it. You can check out more details in the proposal document.

5. Numeric Separators

Look at this:

let num = 1000000000

Is that a billion or a hundred million??

Now in ES 2021, you can write this instead:

let num = 1_000_000_000

Now, that looks like a billion.

Bottom Line

Alright, that's it for ES 2021. Use it if you like. Just don't use WeakRef or any of the Logical Assignment Operators if you have to rely on Babel to target IE 11. (cause it wouldn't work)

Catch you later