DEV Community

loading...

ES 2021 Features

jsdev profile image Andy Li Updated on ・3 min read

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'
Enter fullscreen mode Exit fullscreen mode

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))
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

Then, you can get the wrapped object like this:

myRef.deref() // { name: "Andy" }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

a ||= b
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Is that a billion or a hundred million??

Now in ES 2021, you can write this instead:

let num = 1_000_000_000
Enter fullscreen mode Exit fullscreen mode

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

Discussion (11)

pic
Editor guide
Collapse
iankduffy profile image
Ian Duffy

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

Collapse
pepkin88 profile image
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.

Collapse
pepkin88 profile image
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)

Collapse
biellz1221 profile image
biellz1221

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

Collapse
mluka profile image
MeloGuo

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

Collapse
tyetyetye profile image
tyetyetye

I don't really understand number 4

Collapse
dylanoshima profile image
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.

Collapse
tyetyetye profile image
tyetyetye

Thanks!

Collapse
jsdev profile image
Andy Li Author

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.

Collapse
jonieahh profile image
Collapse
pepkin88 profile image
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.