# 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 (`??`)**

The **nullish coalescing operator (`??`)** is a logical operator that returns its right-hand side operand when its left-hand side operand is [`null`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) or [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined), and otherwise returns its left-hand side operand.

```
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 (**`?.`**)

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 [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) ([`null`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null) or [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined)), 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.

#### 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();
});
```
