Flash cards
Review the key moves
What is the main idea behind ECMAScript 2020?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ x = 999999999999999;Put the learning moves in the order that makes the concept easiest to apply.
New Features in JavaScript 2020
| Feature | Description |
|---|---|
| BigInt | Stores values too big to store in a JavaScript number |
| String matchAll() | Searchs for all occurrences of a string in a string |
| Promise.allSettled() | Takes promises as input and returns a single promise |
| Dynamic Import | Loads JavaScript modules at runtime |
| globalThis | Refers to the global object independent of code environment |
| import.meta | Returns an object indicating the base URL of a module |
| Namespace Exports | Export a full namespace from a module without having to import it first |
New JavaScript Operators in 2020
| Oper | Description |
|---|---|
| ?? | Nullish coalescing returns the first argument not nullish |
| ?. | Optional chaining returns undefined if an object is undefined or null |
| &&= | Logical AND assignment assigns the second value if the first value is true |
| = | Logical OR assignment assigns the second value if the first value is false |
| ??= | Nullish coalescing assignment assigns the second value if the first value is undefined or null |
Browser Support
ECMAScript 2020 is supported in all modern browsers since April 2021 .
| Chrome 80 | Edge 80 | Firefox 80 | Safari 14.1 | Opera 67 |
|---|---|---|---|---|
| Feb 2020 | Feb 2020 | Aug 2020 | Apr 2021 | Mar 2020 |
JavaScript BigInt
JavaScript BigInt variables are used to store big integer values that are too big to be represented by a a normal JavaScript Number .
JavaScript integers are only accurate up to about 15 digits.
Integer Example
let x = 999999999999999;
let y = 9999999999999999; // too bigTo create a BigInt , append n to the end of an integer or call BigInt() :
Example
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)The JavaScript typeof a BigInt is "bigint":
Example
let x = BigInt(999999999999999);
let type = typeof x;JavaScript String matchAll()
Before ES2020 there was no string method that could be used to search for all occurrences of a string in a string.
Example
const iterator = text.matchAll("Cats");If the parameter is a regular expression, the global flag (g) must be set set, otherwise a TypeError is thrown.
Example
const iterator = text.matchAll(/Cats/g);If you want to search case insensitive, the insensitive flag (i) must be set:
Example
const iterator = text.matchAll(/Cats/gi);ES2021 introduced the string method replaceAll().
The Nullish Coalescing Operator (??)
The ?? operator returns the first operand if it is not nullish . Otherwise it returns the second .
The ?? operator returns the second operand if the first operand is nullish .
Nullish is a word for describing null or undefined .
The ?? operator is used to provide default values and is distinct from the logical OR operator || because it only treats null and undefined as "nullish" and ignores other "falsy" values like 0 or an empty string.
Example
let name = null;
let text = "missing";
let result = name ?? text;The Optional Chaining Operator (?.)
The Optional Chaining Operator returns undefined if an object property is undefined or null (instead of throwing an error).
Example
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;Optional chaining not only works on object properties, but also on function calls and arrays.
Function Calls
| Use Case | Syntax | Behavior |
|---|---|---|
| Safe function call | obj.method?.() | Returns undefined if method does not exist |
| Return handling | let x = fn?.() | x is undefined if fn does not exist |
Arrays
| Use Case | Syntax | Returns |
|---|---|---|
| Safe element access | arr?.[2] | undefined if arr is null or undefined |
| Safe property on element | arr?.[1]?.name | Returns undefined safely |
| Safe method call | arr?.map(fn) | Returns undefined if arr does not exist |
| Default value fallback | arr?.[0] ?? "N/A" | Returns "N/A" if arr or element is missing |
The &&= Operator
The Logical AND Assignment Operator is used between two values.
If the first value is true , the second value is assigned.
Logical AND Assignment Example
let x = 10;
x &&= 5;The ||= Operator
The Logical OR Assignment Operator is used between two values.
If the first value is false , the second value is assigned.
Logical OR Assignment Example
let x = 10;
x ||= 5;The ??= Operator
The Nullish Coalescing Assignment Operator is used between two values.
If the first value is undefined or null , the second value is assigned.
Nullish Coalescing Assignment Example
let x;
x ??= 10;JavaScript Promise.allSettled()
The Promise.allSettled() method returns a single Promise from a list of promises.
Example
// 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)), );Promise.allSettled() means "Just run all promises. I don't care about the results".
JavaScript Dynamic Import
Dynamic Import is a way to load JavaScript modules at runtime , rather than at the start of your program.
Syntax
import("./module.js")- The argument must be a string or expression that resolves to a path
- You must run the import inside a module script (<script type="module">)
Unlike static imports (which must appear at the top of a file), dynamic imports can be used anywhere - inside functions, conditionals, event handlers, etc.
| Type | Example | When Loaded |
|---|---|---|
| Static | import { add } from './math.js'; | At load time |
| Dynamic | const math = await import('./math.js'); | When needed |
JavaScript Global This
globalThis provides a standard way to access the global object, regardless of the environment your the code runs in: In the browser, Node.js, in a Web Worker, or another JS runtime.
- In browsers, it is window .
- In Node.js, it is global .
- In Web Workers, it is self .
Many environments have their own name for the this object . This caused compatibility issues for code meant to run everywhere.
globalThis was introduced in ECMAScript 2020 (ES11) to solve that problem. It is a unified reference to the global object, no matter the environment.
globalThis === window); // true in browsers
globalThis === global); // true in Node.jsExample
const getGlobal = function() {
if (typeof self !== 'undefined') return self;
if (typeof window !== 'undefined') return window;
if (typeof global !== 'undefined') return global;
throw new Error('Cannot find global object');
};With globalThis , that is no longer needed.
JavaScript import.meta
import.meta returns an object containing the base URL of a module.
Example
const myObject = import.meta;Module Namespace Exports
With module namespace exports, you can re-export an entire namespace from your own module, without having to import it first.
Before
// re-export all named exports directly
export * from "./utils.js";
// consumers can use:
import { add } from "./math.js";Now
// re-export all as a namespace
export * as utils from "./utils.js";
// consumers can use:
import { utils } from "./math.js";