New feature of ES2020

Thursday, 09/01/2020

Tram Ho

Hello everyone, 2020 is here and let’s find out the latest things earlier this year.

That new version of ECMAScript has been released! Good news for ECMAScript lovers. In the previous version of ECMAScript , many interesting features and useful functions were added. What do we expect this time? Let me check it out.

String.protype.matchAll

The matchAll () method returns the result of a string with a regular expression, including capturing groups. Take a look at the example below to get a better picture:

const string = 'Trần Nữ Như Quỳnh'
const regex = 'Nữ'
for (const match of string.matchAll(regex)) {
    console.log(match)
}
kết quả: ["Nữ", index: 5, input: "Trần Nữ Như Quỳnh", groups: undefined]

const string = 'Trần Nữ Như Quỳnh'

const regex = 'Nữ'

for (const match of string.matchAll(regex)) {

console.log(match)

}

kết quả: ["Nữ", index: 5, input: "Trần Nữ Như Quỳnh", groups: undefined]

Browser support:

Chrome: 73
Firefox: 67
Opera: 60

Dynamic Import

Now, you can import a file dynamically.

Previously we used like this:

<span class="token keyword">import</span> <span class="token punctuation">{</span> max <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'../math.js'</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> nums <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token function">max</span> <span class="token punctuation">(</span> <span class="token operator">...</span> nums <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 3</span>

import { max } from '../math.js' ;

const nums = [ 1 , 2 , 3 ] ;

max ( ... nums ) ; // 3

But now, we can import a file dynamically. And JavaScript reads the modules in the file and brings them into the code where they are called.

<span class="token keyword">const</span> numbs <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token number">1</span> <span class="token punctuation">,</span> <span class="token number">2</span> <span class="token punctuation">,</span> <span class="token number">3</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span> numbs <span class="token punctuation">.</span> length <span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> math <span class="token operator">=</span> <span class="token string">'../math'</span> <span class="token punctuation">;</span>
  <span class="token keyword">import</span> <span class="token punctuation">(</span> math <span class="token punctuation">)</span>
    <span class="token punctuation">.</span> <span class="token function">then</span> <span class="token punctuation">(</span> module <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      module <span class="token punctuation">.</span> <span class="token function">max</span> <span class="token punctuation">(</span> <span class="token operator">...</span> numbs <span class="token punctuation">)</span> <span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token punctuation">)</span>
<span class="token punctuation">}</span>

const numbs = [ 1 , 2 , 3 ] ;

if ( numbs . length ) {

const math = '../math' ;

import ( math )

. then ( module => {

module . max ( ... numbs ) ;

} )

}

Dynamic import returns a promise. Meaning you can write it this way.

<span class="token keyword">const</span> math <span class="token operator">=</span> <span class="token string">'../math.js'</span> <span class="token punctuation">;</span>
<span class="token keyword">const</span> module <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token keyword">import</span> <span class="token punctuation">(</span> math <span class="token punctuation">)</span> <span class="token punctuation">;</span>
module <span class="token punctuation">.</span> <span class="token function">max</span> <span class="token punctuation">(</span> <span class="token operator">...</span> numbs <span class="token punctuation">)</span> <span class="token punctuation">;</span>

const math = '../math.js' ;

const module = await import ( math ) ;

Browser support:

Chrome: 63
Firefox: 67
Opera: 50
Safari: 11.1

BigInt

When you have to multiply two numbers that are so big that they cause overflow, do we have a fix?

Number.MAX_VALUE * 2 // Infinity

1 2	Number.MAX_VALUE * 2 // Infinity

The answer is yes, to BigInt it is a savior for us in this case.

To use BigInt by calling BigInt () with parentheses or 2n with ‘n’ at the end of Number .

const num = 2;
const bigNum = BigInt(num);
console.log(bigNum); // 2n
console.log(bigNum === 2n); // true

const num = 2;

const bigNum = BigInt(num);

console.log(bigNum); // 2n

console.log(bigNum === 2n); // true

You can also multiply, read, multiply and subtract it.

const bigN = BigInt(10);
bigN + bigN; // 20n
bigN * 3n; // 30n
bigN - BigInt('55'); // 45n
bigN / 3n; // 3n

const bigN = BigInt(10);

bigN + bigN; // 20n

bigN * 3n; // 30n

bigN - BigInt('55'); // 45n

bigN / 3n; // 3n

There is a small note, for bigN / 3n returns 3n rather than 3.33333n. Because as you realize from its name, it only handles integers. So bigN / 3n is similar to Math.floor(10/3)

Unfortunately, you cannot use BigInt with float nor can you use BigInt and Number together.

BigInt(3.3); 
// Uncaught RangeError 
BigInt('3.3');
// Uncaught SyntaxError
BigInt(1) + 1;
// Uncaught TypeError
// Không thể kết hợp BigInt với các kiểu dự liệu khác

BigInt(3.3);

// Uncaught RangeError

BigInt('3.3');

// Uncaught SyntaxError

BigInt(1) + 1;

// Uncaught TypeError

// Không thể kết hợp BigInt với các kiểu dự liệu khác

Instead, they will be usable in the case of comparison.

BigInt(1) &lt; 2 // true
BigInt(2) === 1 // false

BigInt(1) < 2 // true

BigInt(2) === 1 // false

And a BigInt can be evaluated as Number if it is conditional.

function print(n) {
  if (BigInt(n)) {
   console.log('hi');
  } else {
   console.log('bye');
  }
}
print(1); // hi
print(0); // bye

function print(n) {

if (BigInt(n)) {

console.log('hi');

} else {

console.log('bye');

}

print(1); // hi

print(0); // bye

Browser support:

Chrome: 67
Firefox: 68
Opera: 54

Promise.allSettled

Promise.allSettled quite similar to Promise.all , but there are differences between them. It is Promise.all waiting for all promises to be fulfilled or rejected. And Promise.allSettled did not care about that. What it cares about is that all promises have been fulfilled, regardless of their status. So every input promise can be fulfilled or rejected, but that’s not important to Promise.allSettled . Just all of them were done.

const promises = [
  fetch('index.html'),
  fetch('index.js'),
  fetch('jquery.js')
];
await Promise
.allSettled(promises)
.finally(() =&gt; {
  // do something
})

const promises = [

fetch('index.html'),

fetch('index.js'),

fetch('jquery.js')

];

await Promise

.allSettled(promises)

.finally(() => {

// do something

})

This can be quite helpful when you want to do something before performing some action, for example, taking all the necessary data before the user sees the list page. But users may also see empty items because the action may be corrupted.

Browser support:

Chrome: 76
Firefox: 71

globalThis

globalThis refers to the context you are in. If you’re at Browsers , globalThis will be this , if you’re at Node globalThis will be global. Therefore you do not need to think about various environmental issues anymore.

// worker.js
globalThis === self
// node.js
globalThis === global
// browser.js
globalThis === window

// worker.js

globalThis === self

// node.js

globalThis === global

// browser.js

globalThis === window

And this is how it works, but don’t use it in your code.

var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
};

var getGlobal = function () {

if (typeof self !== 'undefined') { return self; }

if (typeof window !== 'undefined') { return window; }

if (typeof global !== 'undefined') { return global; }

throw new Error('unable to locate global object');

};

Browser support:

Chrome: 71
Firefox: 65
Safari: 12.1
Node: 12

summary

There are quite a few interesting new features in ES2020 in addition to the features I have shared, including for-in mechanics , Optional Chaining , Nullish coalescing Operator . However, most of them do not support older browsers and they are unstable in all environments. Therefore, you should consider the environments that support that feature.

Thank you everyone for reading my share!

Reference: https://medium.com/javascript-in-plain-english/new-features-in-es2020-you-should-check-b4974d9d7edc https://dev.to/carlillo/es2020-features- in-simple-examples-1513

Share the news now

Source : Viblo

New feature of ES2020

String.protype.matchAll

Dynamic Import

BigInt

Promise.allSettled

globalThis

summary

TikTok becomes the second largest social platform in South Africa

The fastest depreciating after 9 months of launch, iPhone 14 Pro Max continues to break the bottom in Vietnam

Beginner's guide to R: Introduction

10 essential SublimeText plugins for JavaScript developers