What Is New In JavaScript 2020 - ECMA Script 11 Latest Features
Summary of the new features for frontend and backend JavaScript developers in ECMA11

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

MDN

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

MDN

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

MDN

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

MDN

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 ??

ECMA Definition

MDN 

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 ?

ECMA Definition

MDN

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;
What Is New In JavaScript 2020 - ECMA Script 11 Latest Features
JD Berkowitz 27 February, 2022
Share this post
Archive
Sign in to leave a comment
Tutorial: Step by Step of Setting Up Odoo ERP on Google Cloud Platform
Quickly setup Odoo Community for your business or development using Bitnami on GCF