ECMAScript 2020
JavaScript Version Numbers
The previous versions of ECMAScript were identified by numbers: ES5 and ES6.
Starting in 2016, the versions are named based on the year they were released, such as ES2016, 2018, 2020, and so on.
New Features in ES2020
Warning
These characteristics are quite recent.
Some older web browsers might require a different code known as a Polyfill.
JavaScript BigInt
JavaScript uses BigInt variables to store large integer values that cannot be represented by a regular JavaScript Number.
JavaScript can only handle integers accurately up to approximately 15 digits.
BigInt can be created by adding 'n' to an integer or calling BigInt().
Thetypeof a BigIntin JavaScript is identified as "bigint".
JavaScript String matchAll()
Before ES2020, there wasn't a string function available to find all instances of a specific string within another string.
If you use a regular expression as a parameter, make sure to set the global flag (g). If it's not set, a TypeError will be thrown.
To perform a case-insensitive search, you need to set the insensitive flag (i).
Note
ES2021 brought in a new string method called replaceAll().
The Nullish Coalescing Operator (??)
The ?? operator gives back the initial value if it's not nullish (either null or undefined).
If not, it gives back the second option.
The Optional Chaining Operator (?.)
The Optional Chaining Operator gives backundefined when an object is eitherundefined ornull without causing an error.
The &&= Operator
The Logical AND Assignment Operator is employed when working with two values.
If the initial value istrue, the subsequent value gets assigned.
The ||= Operator
The Logical OR Assignment Operator connects two values.
If the initial value is false
The ??= Operator
TheNullish Coalescing Assignment Operator is employed when working with two values.
If the initial value is undefined or null, the second value takes its place.
JavaScript Promise.allSettled()
The Promise.allSettled() function gives back a Promise after processing a set of promises.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>
<p>Integers, which are numbers without decimal points or exponent notation, can precisely represent values up to 15 digits long.</p>
<p id="demo"></p>
<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + " <br> " + y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>
<p id="demo"></p>
<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + " <br> " + y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>
<p>The typeof a BigInt is:</p>
<p id="demo"></p>
<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The "?? operator" gives back the first thing you give it, as long as it's not empty (null or undefined). If it's empty, then it gives back the second thing you gave it.</p>
<p id="demo"></p>
<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The question mark operator gives back 'undefined' if an object is either undefined or null. It doesn't cause an error.</p>
<p>Car name is:</p>
<p id="demo"></p>
<script>
const car = {
type: "Fiat",
model: "500",
color: "white"
};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &&= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x = 100;
x && = 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>
<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>
<script>
let x = undefined;
x || = 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The "??=" operator is used when you have two values. If the first value is not defined or is empty, the second value will be used instead.</p>
<p id="demo"></p>
<script>
let x;
document.getElementById("demo").innerHTML = x ?? = 5;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Promise Object</h1>
<h2>The Promise.allSettled() Method</h2>
<p id="demo"></p>
<script>
// Create a Promise
const myPromise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, "King");
});
// Create another Promise
const myPromise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 100, "Queen");
});
// Settle All
Promise.allSettled([myPromise1, myPromise2]).then((results) => results.forEach((x) => myDisplay(x.status)), );
// Funtion to run when a Promise is settled:
function myDisplay(some) {
document.getElementById("demo").innerHTML += some;
}
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery