DEV Community

Cover image for Some of New ES12(ES2021) JavaScript Features.
EswaraPrakash Vaithiyanathan
EswaraPrakash Vaithiyanathan

Posted on

Some of New ES12(ES2021) JavaScript Features.

Changes released in ES2021
The changes released in ES2021 are as follows.


  • Perform string replacement for all applicable parts

  • Existing replace()methods are valid only for the first part to be replaced, so if you wanted to replace everything you had to use a regular expression

  • With this method, you can prevent replacement omissions due to regular expression mistakes, and it is easy to understand what you want to do at a glance.

let str = "I like programming. I like my job."
str.replaceAll ( "like" , "love" ) 
// Output result: "I love programming. I love my job." 
Enter fullscreen mode Exit fullscreen mode

It is not yet supported by TypeScript by default, but you can use it by changing the setting in tsconfig.json as follows. (Other changes to ES2021 will also be available)

{ "compilerOptions" : { "lib" : [ "ES2021" ],    }, }

Enter fullscreen mode Exit fullscreen mode


  • When any one of the promises running at the same time is processed resolved, that promise will be returned.

  • If all promises are reject, then AggregateError(the type when one operation needs to return multiple errors) is returned.

  • If you want to know that the process was successful but you don't need to know which one, using any seems to be useful.

  • This is also not yet supported by default in TypeScript. tsconfig.json It can be used by changing the settings as described above .

Promise .any ([ new Promise ( ( resolve, reject ) => 
setTimeout (reject, 100 , '1st' )), 
new Promise (( resolve, reject ) => setTimeout (resolve, 200, '2nd')) ]) 
.then ( value => console .log ( `first completed process: $ {value} `)) 
.catch (err => console .log (err))
// Output result 
// First completed process: 2nd 
Enter fullscreen mode Exit fullscreen mode

Makes the following feasible:

  • Creating a "weak reference" to an object
    User-defined finalizer execution after objects are garbage collected.

  • A "weak reference" is a reference to an object that does not interfere with the execution of garbage collection.

Normally, when an object is created, it is kept in memory (a "strong reference"), but a "weak reference" is subject to garbage collection collection when memory needs to be freed.

  • If you use these two well, you can prevent memory leaks of data that is no longer referenced, such as deleted objects.

  • However, the functionality of garbage collection is complex (when and how garbage collection occurs depends on the implementation of the JavaScript engine you are using ) and should be carefully considered for proper use. Officially, there is a note that it is better to avoid using it if possible.

  • It wasn't mentioned in the official TypeScript documentation, but according to this issue , it's available in version 4.1 and later.

  • I tried to execute the following code in PlayGround, but it was certainly able to compile with 4.1 or later version.

const obj = new  Map (); 
const cache = new WeakRef (obj); 
// Output result 
// v4.0.5 
// Cannot find name'WeakRef'. 
// v4.1.5 
// None
Enter fullscreen mode Exit fullscreen mode

Logical Assignment Operators
You will be able to write as follows

  • No extra branching is required when entering the initial value, and the implementation is refreshing.

  • Available from version 4.0 on TypeScript

// a || (a = b);
 a || = b;

// a && (a = b);
 a && = b;

// a ?? (a = b);
 a ?? = b;
Enter fullscreen mode Exit fullscreen mode

Numeric separators

  • _Can be inserted between the numbers. (Even if you enter it, it will be recognized as a numerical value)
  • This is possible with all numeric literals, not just decimal numbers. This makes the numbers easier to read
  • Available from version 2.7 in TypeScript.
1_000_000_000            // 1.0101_475_938.38 // 
1.01           million, decimal point can also be used
Enter fullscreen mode Exit fullscreen mode

Top comments (0)