What is ECMA Script 11?
Since publication of the first edition in 1997, ECMAScript has grown to be one of the world's most widely used general-purpose programming languages. It is best known as the language embedded in web browsers but has also been widely adopted for server and embedded applications. You can now write full stack applications in pure JS with NodeJS and JavaScript.
Let's get started taking a look at the useful new features for frontend developers in the latest version of ECMA Script.
The examples shown below can be found in my CodePen ECMA 2020 Review Here
String.matchAll([]) Method
ECMA Definition
First off the new .matchAll() method for strings allows for easy access to match all the elements of your regular expression and an irritator. You can see this method used in a fairly common case where you may have a continuous string containing formatted data that you need to find ALL your matches.
String.matchAll() performs a regular expression match of the String representing the this value against regexp and returns an iterator. Each iteration result's value is an Array object containing the results of the match, or null if the String did not match.
const regex = /title: ([a-zA-Z]+)/g; //find everything matching 'title: ' then letters
const text = 'title: Doctor Aubrey Schivers title: Mr. Ted Nugent title: Honorable Barry Manilow';
[...text.matchAll(regex)].forEach(m => {
console.log(m);
});
Outputs// [object Array] (2) => ["title: Doctor","Doctor"]// [object Array] (2) => ["title: Mr","Mr"]// [object Array] (2) => ["title: Honorable","Honorable"]
New Type: BigInt
ECMA Definition
It's not just big, it's huge! The new BigInt type is not just semantics, it is a new primitive type for arbitrary large numbers. It can hold substantially bigger numbers than the standard Number type (whose limit is 2ˆ53, represented by the Number.MAX_SAFE_INTEGER constant. This limit depends on each implementation environment.
A BigInt can be initialized with with either with the "n" suffix or with the constructor.
const bigIntExample = BigInt('17265892712658927912712189129121727918');
const anotherBigIntExample = 17265892712658927912712189129121727918n
bigIntExample === anotherBigIntExample;// Outputs => true
globalThis Access
ECMA Definition
Keeping track of this can be a pain as every JS developer is aware. globalThis offers a universal way to access the global this value;
In the browser, global is window.
Node.js calls it global.
Web workers, call it self.
ECMAScript 2020 makes it easier to access this object by providing a globalThis variable:
// In the browser
console.log(globalThis === window); // Outputs => true
// In Node.js
console.log(globalThis === global); // Outputs => true
// In a web worker
console.log(globalThis === self); // Outputs => true
Promise.allSettled([])
ECMA Definition
This is one of my favorite for the 2020 release. It makes gathering your Promises easy and does not short-circuit.
The .allSettled() method returns a promise that is fulfilled with an array of promise state snapshots, but only after all the original promises have settled, i.e. become either fulfilled or rejected.
It resolves all elements of the passed iterable to promises as it runs this algorithm.
The result of B will be an array containing the results of all promises in A.
Promise.allSettled is very similar to Promise.all, but the Promise.all fails if some of the supplied promises is rejected, while Promise.allSettled resolves no matter what.
const myPromiseA = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('foo');
reject('nooo');
}, 300);
});
const myPromiseB = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('foo');
reject('nooo');
}, 1300);
});
//Takes an array of Promises and fulfills once all are accepted or rejected
const roles = Promise.allSettled([myPromiseA, myPromiseB]);
roles.then((r) => {
console.log(r)
})
//Outputs =>
//Array(2)
[
{
"status": "fulfilled",
"value": "foo"
},
{
"status": "fulfilled",
"value": "foo"
}
]
Nullish Coalescing Operator ??
This is probably one of the most useful ECMA introductions this year, a value selection operator '??' to complement the '&&' and '||' operators. It can be used as a replacement to the OR operator for default conditionals. Usage is identical to the OR operator but it only defaults to the second operand in case the first one is null or undefined
//Instead of const pageTitle = title || 'No Page Title';
let title = null;
const pageTitle = title ?? 'No Page Title'; //ONLY defaults if title is null or undefined =
console.log(pageTitle); // Outputs => 'No Page Title'
title = '';console.log(pageTitle); // Outputs => ''
Optional Chaining Operator ?
The '?' operator is a property access and function invocation operator that short-circuits if the value to access/invoke is nullish.
For Typescript users this seem like a familiar pattern for conditionally checking null or undefined values. ECMA11 uses the nullish '?' operator similar to typescript to identify props that may not be defined and returns undefined instead of error. Let's see how it is used below.
const obj = {};
console.log(someObj.nonExistentProp1.nonExistentProp2.nonExistentProp3);
// Outputs => Uncaught TypeError: Cannot read properties of undefined (reading 'nonExistentProp2')
console.log(obj?.nonExistentProp1?.nonExistentProp2); // Outputs => undefined
const nullFunc = null;
console.log(nullFunc?.()); // Outputs => undefined
const objDifferent = {};
console.log(objDifferent.nonExistentFunction?.()); // Outputs => undefined
const nonArray = null;
console.log(nonArray?.[10]); // Outputs => undefined
Other Additions
- import(), A syntax to asynchronously import Modules with a dynamic specifier;
- Increased standardization of for-in enumeration order
- Dedicated export * as ns from 'module' syntax for use within modules;
- import.meta, a host-populated object available in Modules that may contain contextual information about the Module;