Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 29, 2021 08:30 pm GMT

New ES2021 JavaScript features (now available)

Photo by James Harrison

Read this article on my blog

In case you missed it, the new ES2021 JavaScript features have been recently approved by the Ecma General Assembly and are now already supported by recent versions of the most popular browsers, yeay

Note: For older browsers support (which you should definitely care about), you will need to set up your project with the Babel compiler. Babel will "translate" those new features to some JavaScript that older browsers can understand. Try it out on the Babel homepage!

Logical Assignment Operators

Proposal

1. Logical nullish assignment (??=)

x ??= y will only assign y to x if x is nullish (i.e. null or undefined)

// Example 1: x is nullishlet xconst y = 'Chuck Norris'//  x is assigned 'Chuck Norris'x ??= y// Example 2: x is not nullishlet x = 1const y = 2//  x is not assigned 2, its value remains 1x ??= y // Translates to thisx ?? (x = y)// or thisif (x === null || typeof x === 'undefined') {    x = y}

2. Logical OR assignment (||=)

x ||= y : this one is similar to ??=, except it only assigns y to x if x is falsy

// Examplelet x = 0const y = 2//  x is assigned 2x ||= y// Translates to thisx || (x = y)// or thisif (!x) {    x = y}

3. Logical AND assignment

x &&= y is the exact opposite of x ||= y : it assign y to x if x is truthy

// Examplelet x = 1const y = 2//  x is assigned 2x &&= y// Translates to thisx && (x = y)// or thisif (x) {    x = y}

Numeric separator

Proposal

I have been waiting for this one for a long time. It simply improves readability of big numbers, without changing anything to performance nor equality:

// Beforeconst bigNumber = 19432482347 // => ??? hard to read// Nowconst readableBigNumber = 19_432_482_347 // here we go, much better 

String.replaceAll

Proposal

String.prototype.replaceAll(searchValue, replaceValue)

Until now, we had String.prototype.replace which replaced the first occurrence * of a pattern in a string. In order to replace *every occurrence, we had to use a regular expression with the global flag:

// String.prototype.replace (searchValue, replaceValue)const str = "This is a test, I repeat, this is a test"str.replace(/test/g, 'success')// output: This is a success, I repeat, this is a success

There is also a trick which consists of using the split and join methods:

str.split('test').join('success')// output: This is a success, I repeat, this is a success

This can now be done using the replaceAll method:

str.replaceAll('test', 'success')// output: This is a success, I repeat, this is a success

Just like with String.prototype.replace, searchValue can be a regular expression, but it has to include a global flag, otherwise it will throw an exception. As mentioned in the proposal:

This is done to avoid the inherent confusion between the lack of a global flag (which implies "do NOT replace all") and the name of the method being called (which strongly suggests "replace all").

Promise.any

Proposal

Promise.any([promise1, promise2, promise3]).then(...).catch(...)

Promise.any is a new promise method that takes an array of promises and resolves with the value of the first promise to successfully resolve. It will throw an AggregateError if all the promises are rejected.

This snippet (from the proposal) checks which endpoint responds the fastest, and then logs it:

Promise.any([  fetch('https://v8.dev/').then(() => 'home'),  fetch('https://v8.dev/blog').then(() => 'blog'),  fetch('https://v8.dev/docs').then(() => 'docs')]).then((first) => {  // Any of the promises was fulfilled.  console.log(first);  //  'home'}).catch((error) => {  // All of the promises were rejected.  console.log(error);});

WeakRefs and Finalizers

Proposal

Those new features come together in the same proposal in order to add the ability to:

  1. createweak referencesto objects with theWeakRefclass
  2. running user-definedfinalizersafter objects are garbage-collected, with theFinalizationRegistryclass

I won't go into more details about those features as they are quite advanced, and, as the proposal states:

Their correct use takes careful thought, and they are best avoided if possible.

But if you're interested, feel free to read more in the original proposal.

That's all for today folks, have a fantastic day!

With , Yohann


Original Link: https://dev.to/alarid/new-es2021-javascript-features-now-available-48m9

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To