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

Comments

[Ian Duffy]

Can't one be done with regex /g tag with normal replace function.

[Marek Pepke]

Consider a case, where you want to replace all occurrences of a user provided string with something else, maybe an empty string. Since we don't have something like RegExp.escape (yet), it's quite difficult to do it right in vanilla JS.
But with replaceAll, you just do text.replaceAll(externalString, '') and you're done.

This new method can also have positive effects in terms of performance, since no regular expression had to be parsed and executed for this relatively simple task.

[Marek Pepke]

Although there is also another way, which is available today, but it may not be obvious for everyone.
It is the split/join technique:
text.split(replaceThat).join(withThat)

[biellz1221]

That's probably what's happening under the hood. This new method is just a way to make it easier

[MeloGuo]

It's like .sub and .gsub methods in the Ruby.

[Hanky Janky]

I don't really understand number 4

[Dylan]

From the proposal I believe a ||= b is syntactic sugar for:
a = a || b, but is meant to not trigger the object's setter function (if it has one).

They use the example: obj.a = obj.a ?? b would trigger the setter for obj.a since it's being reassigned in both instances. To prevent this we could do obj.a ?? (obj.a = b); which would only trigger the reassignment if obj.a == null, but apparently that's weird. Thus to make it succinct they propose:
a ??= b.
Which will not trigger the setter unless it needs to.

[Hanky Janky]

Thanks!

[Andy Li]

It's just like an assignment, except that it will only get assigned if a is already false. If it isn't, then no assignment, a will still be what it was.

[Joni Dores]

death-to-ie11.com/

[Marek Pepke]

I know this is provocative and off-topic, but IE 11 isn't really relevant now. I have much more issues with Safari, since it is still in use and is often quite problematic.