JavaScript
  • JavaScript Introduction
  • JS Engine
  • V8 Engine
  • First-class function
  • Optimized Code
  • Call Stack & Memory heap
  • Single Thread
  • JavaScript RunTime
  • Nodejs
  • Context and Environment
  • Hoisting
  • Functions
  • Arguments
  • Variables
  • Scope
  • IIFE
  • this
  • call(), apply() and bind()
  • currying
  • Types
  • Type Coercion
  • Functions as Object
  • HOF (Higher Order Function)
  • Two pillars of Javascript
  • Closures
  • Prototypal Inheritance
  • OOP and FP
  • OOP
    • 4 principles of OOP
  • FP
    • Pure function
    • Imperative vs Declarative
    • Immutability
    • HOF and Closures
    • Currying
    • Partial Application
    • Compose and Pipe
  • Composition vs Inheritance
  • OOP vs FP
  • JS working
  • Promises
  • Async Await
  • ES5 - ECMAScript 2009
  • ES6 - ECMAScript 2015
  • ES7 - ECMAScript 2016
  • ES8 - ECMAScript 2017
  • ES9 - ECMAScript 2018
  • ES10 - ECMAScript 2019
  • ES11 - ECMAScript 2020
  • ES12 - ECMAScript 2021
  • JOB Queue
  • Promises Execution
Powered by GitBook
On this page
  • globalThis
  • Promise.allSettled()
  • nullish coalescing operator (??)
  • optional chaining operator (?.)
  • BigInt — Arbitrary precision integers
  • String.prototype.matchAll()
  • Dynamic import

Was this helpful?

ES11 - ECMAScript 2020

globalThis

The global globalThis property contains the global this value, which is akin to the global object.

function canMakeHTTPRequest() {
  return typeof globalThis.XMLHttpRequest === 'function';
}

console.log(canMakeHTTPRequest());
// expected output (in a browser): true

Promise.allSettled()

The Promise.allSettled() method returns a promise that resolves after all of the given promises have either fulfilled or rejected, with an array of objects that each describes the outcome of each promise.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

nullish coalescing operator (??)

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const foo2 = "" ?? 'default string';
console.log(foo2);
// expected output: ""

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

optional chaining operator (?.)

Example 1

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // detailed address is unknown
  }
};
let customerCity = customer.details?.address?.city;
// … this also works with optional chaining function call

let customerName = customer.name?.getName?.(); // method does not exist, customerName is undefined

Example 2

let myMap = new Map();
myMap.set("foo", {name: "baz", desc: "inga"});

let nameBar = myMap.get("bar")?.name;
// undefined

BigInt — Arbitrary precision integers

BigInt is the 7th primitive type.

BigInt is an arbitrary-precision integer. What this means is that variables can now represent 2⁵³ numbers. And not just max out at 9007199254740992.

const b = 1n; // append n to create a BigInt

String.prototype.matchAll()

The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.

const regexp = /t(e)(st(\d?))/g;
const str = 'test1test2';

const array = [...str.matchAll(regexp)];

console.log(array[0]);
// expected output: Array ["test1", "e", "st1", "1"]

console.log(array[1]);
// expected output: Array ["test2", "e", "st2", "2"]

Dynamic import

Imports can now be assigned to a variable

element.addEventListener('click', async () => {
    const module = await import(`./api-scripts/button-click.js`);
    module.clickEvent();
});
PreviousES10 - ECMAScript 2019NextES12 - ECMAScript 2021

Last updated 4 years ago

Was this helpful?

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is or , and otherwise returns its left-hand side operand.

The optional chaining operator (?.) permits reading the value of a property located deep within a chain of connected objects without having to expressly validate that each reference in the chain is valid. The ?. operator functions similarly to the . chaining operator, except that instead of causing an error if a reference is ( or ), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.

null
undefined
nullish
null
undefined