ECMAScript version 2021 is expected to be released in June 2021. Here are some of the features you might find in ES2021 or ES12. The list is based on ECMAScript Proposals and new features released by Google Chrome V8 engine.
All features listed below are supported at the time of writing in the Google Chrome Canary build (the experimental version of the Google Chrome browser).
String replaceAll () method
String.prototype.replaceAll () replaces all occurrences of a string with a different string value.
Currently in JavaScript, strings have a replace () method . It can be used to replace a substring with another string.
const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"
If the input replacement pattern is a string, the replace () method replaces only the first occurrence. Therefore, the code does not replace the second occurrence of " Back ".
We can only do a complete replacement if we provide the replacement pattern as a regular expression .
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"
String.prototype.replaceAll () tries to replace all occurrences, even if the input pattern is a string .
const str = "Backbencher sits at the Back";
const newStr = str.replaceAll("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Front"
Private methods
, . #.
class Person {
//
#setType() {
console.log("I am Private");
}
//
show() {
this.#setType();
}
}
const personObj = new Person();
personObj.show(); // "I am Private";
personObj.setType(); // TypeError: personObj.setType is not a function
setType() , personObj.setType undefined. undefined TypeError.
- (get/set) , # .
class Person {
//
get name() { return "Backbencher" }
set name(value) {}
//
get #age() { return 42 }
set #age(value) {}
}
get set name . , name , .
const obj = new Person();
console.log(obj.name); // "Backbencher"
console.log(obj.age); // undefined
WeakRef
WeakRef (Weak References). . , . , , , .
JavaScript - . , JavaScript . JavaScript , MDN.
:
const callback = () => {
const aBigObj = {
name: "Backbencher"
};
console.log(aBigObj);
};
(async function(){
await new Promise((resolve) => {
setTimeout(() => {
callback();
resolve();
}, 2000);
});
})();
. callback() setTimeout(). await. await - ES6, .
2 «Backbencher». , callback(), aBigObj .
aBigObj .
const callback = () => {
const aBigObj = new WeakRef({
name: "Backbencher"
});
console.log(aBigObj.deref().name);
}
(async function(){
await new Promise((resolve) => {
setTimeout(() => {
callback(); // "Backbencher"
resolve();
}, 2000);
});
await new Promise((resolve) => {
setTimeout(() => {
callback(); // , "Backbencher"
resolve();
}, 5000);
});
})();
WeakRef new WeakRef(). .deref(). setTimeout() name. .
, setTimeout() «Backbencher». . -, . WeakRef , .
FinalizationRegistry - WeakRef. , , .
const registry = new FinalizationRegistry((value) => {
console.log(value);
});
registry FinalizationRegistry. (), FinalizationRegistry, .
(function () {
const obj = {};
registry.register(obj, "Backbencher");
})();
3 obj registry. obj , .register() . , , obj , «Backbencher» .
Google Chrome Canary, 1 , «Backbencher» . Chrome - « ». «».
Promise.any() AggregateError
Promise.any() , . 3 , .
const p1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});
Promise.any() p1, p2 p3.
(async function() {
const result = await Promise.any([p1, p2, p3]);
console.log(result); // "A", "B" "C"
})();
, ? Promise.any() AggregateError. .
const p = new Promise((resolve, reject) => reject());
try {
(async function() {
const result = await Promise.any([p]);
console.log(result);
})();
} catch(error) {
console.log(error.errors);
}
Promise.any() . « » (reject). .
(&&, || ??) .
let x = 1;
let y = 2;
x &&= y;
console.log(x); // 2
3 :
x && (x = y)
-:
if(x) {
x = y
}
x - , y, 2.
&&, || ??.
||
.
let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1
3 :
x || (x = y)
, , x . x 1, , , , . 1 .
??
?? - (Nullish Coalescing operator) JavaScript. , , null undefined , . null undefined, .
let a;
let b = a ?? 5;
console.log(b); // 5
On line 2, if a is null or undefined , the right side ?? is evaluated and assigned to b .
Let's now consider ?? together with = .
let x;
let y = 2;
x ??= y;
console.log(x); // 2
Line 2 in the code above is equivalent to the following expression:
x = x ?? (x = y)
Here x is undefined . So the expression on the right is evaluated and sets x to 2 .