Some of New ES12(ES2021) JavaScript Features.
Tags: javascript, es12, es2021, ecmascript
Published: 2021-09-20 03:21:15

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

**String.prototype.replaceAll()**
* 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." 
```

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" ],    }, }

```

**Promise.any()**
* 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 
```

**WeakRefs**
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.

```typeScript.ts
const obj = new  Map (); 
const cache = new WeakRef (obj); 
// Output result 
// v4.0.5 
// Cannot find name'WeakRef'. 
// v4.1.5 
// None
```

**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;
```
**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
```