Skip to content

Commit 1b719fd

Browse files
sudheerjsudheerj
committed
Added ES12 features
1 parent 791c0bd commit 1b719fd

File tree

11 files changed

+234
-1
lines changed

11 files changed

+234
-1
lines changed

‎README.md‎

Lines changed: 172 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Each proposal for an ECMAScript feature goes through the following maturity stag
3434
| ES2018 Or ES9 | June 2018 |
3535
| ES2019 Or ES10 | June 2019 |
3636
| ES2020 Or ES11 | June 2020 |
37-
37+
| ES2021 Or ES12 | June 2021 |
3838

3939
### Table of Contents
4040

@@ -100,6 +100,12 @@ Each proposal for an ECMAScript feature goes through the following maturity stag
100100
|7 | [globalThis](#globalthis)|
101101
|8 | [import.meta](#import.meta)|
102102
|9 | [for..in order](#for..in-order)|
103+
| | **ES2021 Or ES12**|
104+
|1 | [replaceAll](#replace-all) |
105+
|2 | [promise.any](#promise.any) |
106+
|3 | [WeakRef](#weak-ref)|
107+
|4 | [Numeric Separators](#numeric-separators)|
108+
|5 | [Logical Operators](#logical-operators)|
103109

104110
## ES2015 Or ES6
105111

@@ -1999,6 +2005,171 @@ Most of these features already supported by some browsers and try out with babel
19992005
20002006
**[⬆ Back to Top](#table-of-contents)**
20012007
2008+
## ES2021 Or ES12
2009+
ECMAScript 2021 or ES12 has been released in mid of 2021 with few important features which can be used JavaScript.
2010+
2011+
1. ### replaceAll
2012+
The new `replaceAll()` method from `String` prototype is used to replace all the occurrences of a string from another string value. Earlier it was not possible to replace all the instances of a substring without the use of regex.
2013+
2014+
**Before ES2021**
2015+
```javascript
2016+
console.log('10101010'.replace(new RegExp('0', 'g'), '1')); // 11111111
2017+
console.log('01010101'.replace(/0/g, '1')); // 11111111
2018+
```
2019+
2020+
**After ES2021**
2021+
```javascript
2022+
console.log('10101010'.replaceAll('0', '1')); // 11111111
2023+
console.log('01010101'.replaceAll('0', '1')); // 11111111
2024+
```
2025+
2026+
2. ### promise.any
2027+
The new `promise.any` method takes multiple promises and resolves to the value of the first promise which is successfully fulfilled.
2028+
2029+
```javascript
2030+
let promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'Resolves after 100ms'));
2031+
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Resolves after 200ms'));
2032+
let promise3 = new Promise((resolve, reject) => setTimeout(reject, 0) );
2033+
2034+
let promises = [promise1, promise2, promise3];
2035+
2036+
Promise.any(promises)
2037+
.then( value => console.log(value)); // Resolves after 100ms
2038+
```
2039+
2040+
In case none of the promises resolved then it throws `AggregateError` exception.
2041+
2042+
```javascript
2043+
(async () => {
2044+
try {
2045+
const output = await Promise.any([
2046+
Promise.reject('Error 1'),
2047+
Promise.reject('Error 2'),
2048+
Promise.reject('Error 3'),
2049+
]);
2050+
console.log(`Output: ${output}`);
2051+
} catch (err) {
2052+
console.log(`Error: ${err.errors}`);
2053+
}
2054+
})();
2055+
// Error: Error1,Error2,Error3
2056+
```
2057+
3. ### WeakRef
2058+
WeakRef provides two new pieces of functionality
2059+
1. creating weak references to objects with the WeakRef class
2060+
2. running user-defined finalizers after objects are garbage-collected, with the FinalizationRegistry class
2061+
2062+
**WeakRef:**
2063+
weak reference is a reference to an object that doesn’t prevent garbage collection if it is the only reference to the object in the memory.It’s useful when we don’t want to keep the object in memory forever(e.g, WebSocket). The main use of weak references is to implement caches or mappings to large objects for which you don't need to keep it in memory for rarely used objects.
2064+
2065+
Prior to ES12, WeakMaps and WeakSets are the only way to kind-of-weakly reference an object in JavaScript. Whereas WeakRef in ES12 provides actual weak references, enabling a window into the lifetime of an object.
2066+
2067+
Let's see an example of a weak reference object using `WeakRef` constructor and read the reference using `deref()` method
2068+
2069+
```javascript
2070+
const myObject = new WeakRef({
2071+
name: ‘Sudheer’,
2072+
age: 34
2073+
});
2074+
console.log(myObject.deref()); //output: {name: “Sudheer”, age: 35}
2075+
console.log(myObject.deref().name); //output: Sudheer
2076+
```
2077+
**Finalizers:**
2078+
A `FinalizationRegistry` object lets you request a callback when an object is garbage-collected. It works as a cleanup callback.
2079+
2080+
```javascript
2081+
// Create new FinalizationRegistry:
2082+
const reg = new FinalizationRegistry((val) => {
2083+
console.log(val);
2084+
});
2085+
2086+
(() => {
2087+
// Create new object:
2088+
const obj = {}
2089+
2090+
// Register finalizer for the "obj" as first argument and value for callback function as second argument:
2091+
reg.register(obj, 'obj has been garbage-collected.')
2092+
})();
2093+
```
2094+
2095+
**Note:** The finalization callback does not run immediately after garbage-collecting the event listener, so don't use it for important logic or metrics.
2096+
4. ### Numeric Separators
2097+
Numeric separators are helpful to read large numbers(or numeric literals) in JavaScript by providing separation between digits using underscores(_). In otherwords, numeric literals are more readable by creating a visual separation between groups of digits.
2098+
2099+
For example, one billion and one trillion becomes more readable with _ numeric separator,
2100+
2101+
```javascript
2102+
const billion = 1000_000_000;
2103+
console.log(billion); // 1000000000
2104+
2105+
const trillion = 1000_000_000_000n; // BigInt number
2106+
console.log(trillion); // 1000000000000
2107+
```
2108+
2109+
It can be used for binary and hex literals as well.
2110+
2111+
```javascript
2112+
const binaryLiteral = 0b1010_1010;
2113+
console.log(binaryLiteral);
2114+
const hexLiteral = 0xFF_FF_FF_FF;
2115+
console.log(hexLiteral);
2116+
```
2117+
2118+
**Note:** The separator can be placed anywhere within the number for readability purpose.
20022119
2120+
5. ### Logical Operators
2121+
Logical assignment operators combines the logical operations(&&, || or ??) with assignment. They are quite useful for assigning default values to variables.
2122+
**&&=:**
2123+
The &&= operator performs the assignment only when the left operand is truthy.
2124+
```javascript
2125+
let x = 10;
2126+
let y = 20;
2127+
x &&= y;
2128+
console.log(x); // 20
2129+
```
20032130
2131+
The above logical assignment operation can be expanded to:
20042132
2133+
```javascript
2134+
x = x && (x = y);
2135+
(OR)
2136+
if (x) {
2137+
x = y;
2138+
}
2139+
```
2140+
**||=:**
2141+
The ||= operator performs the assignment only when the left operand is falsy.
2142+
```javascript
2143+
let x = 0;
2144+
let y = 20;
2145+
x ||= y;
2146+
console.log(x); // 20
2147+
```
2148+
2149+
The above logical assignment operation can be expanded to:
2150+
2151+
```javascript
2152+
x = x || (x = y);
2153+
(OR)
2154+
if (!x) {
2155+
x = y;
2156+
}
2157+
```
2158+
**??=:**
2159+
The ??= operator performs the assignment only when the left operand is null or undefined.
2160+
```javascript
2161+
let x;
2162+
let y = 1;
2163+
x ??= y;
2164+
console.log(x); // 1
2165+
```
2166+
2167+
The above logical assignment operation can be expanded to:
2168+
2169+
```javascript
2170+
x = x ?? (x = y);
2171+
(OR)
2172+
if (!x) {
2173+
x = y;
2174+
}
2175+
```

‎es2021/logical-assignment-operators/and.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
let x = 10;
2+
let y = 20;
3+
x &&= y;
4+
console.log(x); // 20

‎es2021/logical-assignment-operators/nullish.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
let x;
2+
let y = 1;
3+
x ??= y;
4+
console.log(x); // 1

‎es2021/logical-assignment-operators/or.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
let x = 0;
2+
let y = 20;
3+
x ||= y;
4+
console.log(x); // 20

‎es2021/numeric-separator/big-integers.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const billion = 1000_000_000;
2+
console.log(billion); // 1000000000
3+
4+
const trillion = 1000_000_000_000n; // BigInt number
5+
console.log(trillion); // 1000000000000

‎es2021/numeric-separator/binary-hex.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
const binaryLiteral = 0b1010_1010;
2+
console.log(binaryLiteral);
3+
const hexLiteral = 0xFF_FF_FF_FF;
4+
console.log(hexLiteral);

‎es2021/promise-any/promise-any-error.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
(async () => {
2+
try {
3+
const output = await Promise.any([
4+
Promise.reject('Error 1'),
5+
Promise.reject('Error 2'),
6+
Promise.reject('Error 3'),
7+
]);
8+
console.log(`Output: ${output}`);
9+
} catch (err) {
10+
console.log(`Error: ${err.errors}`);
11+
}
12+
})();
13+
// Error: Error1,Error2,Error3

‎es2021/promise-any/promise-any.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
let promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'Resolves after 100ms'));
2+
let promise2 = new Promise((resolve) => setTimeout(resolve, 200, 'Resolves after 200ms'));
3+
let promise3 = new Promise((resolve, reject) => setTimeout(reject, 0) );
4+
5+
let promises = [promise1, promise2, promise3];
6+
7+
Promise.any(promises)
8+
.then( value => console.log(value)); // Resolves after 100ms

‎es2021/replace-all.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
console.log('10101010'.replaceAll('0', '1')); // 11111111
2+
console.log('01010101'.replaceAll('0', '1')); // 11111111

‎es2021/weakref/finalizer.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Create new FinalizationRegistry:
2+
const reg = new FinalizationRegistry((val) => {
3+
console.log(val);
4+
});
5+
6+
(() => {
7+
// Create new object:
8+
const obj = {}
9+
10+
// Register finalizer for the "obj" as first argument and value for callback function as second argument:
11+
reg.register(obj, 'obj has been garbage-collected.')
12+
})();

0 commit comments

Comments
 (0)