Key New Features of ES2020 (ES11): Private Fields, Promise.allSettled, BigInt, Nullish Coalescing, Optional Chaining, Dynamic Import, matchAll, globalThis, and Module Namespace Exports

The ES2020 (ES11) specification introduced many practical language enhancements. Below is a concise overview of the most useful new features.

Private Fields

Class fields prefixed with # become truly private and cannot be accessed outside the class.

class Hero {
    #aggressivity = 0
    constructor(aggressivity){
        this.#aggressivity = aggressivity
    }
    getHurt(){
        return this.#aggressivity
    }
    setAggressivity(aggressivity){
        this.#aggressivity = aggressivity
    }
}
const shooter = new Hero(100)
let hurt = shooter.getHurt()
console.log(hurt) // 100
console.log(shooter.#aggressivity) // SyntaxError: Private field '#aggressivity' must be declared in an enclosing class

Private fields can only be read or modified through public class methods.

Promise.allSettled

Unlike Promise.all (which rejects on the first failure) and Promise.race (which resolves/rejects on the first settled promise), Promise.allSettled returns an array describing the outcome of every promise, regardless of success or failure.

let p1 = new Promise((resolve, reject) => { resolve('成功了') })
let p2 = new Promise((resolve, reject) => { resolve('success') })
let p3 = Promise.reject('失败')
Promise.allSettled([p1, p3, p2]).then(res => console.log(res))
// [{status:'rejected',reason:'失败'},{status:'fulfilled',value:'成功了'},{status:'fulfilled',value:'success'}]

BigInt

JavaScript numbers are IEEE‑754 64‑bit floating‑point values, which cannot precisely represent integers larger than Number.MAX_SAFE_INTEGER . BigInt provides arbitrary‑precision integer arithmetic.

const bigint = 999999999999999999n
const bigintByMethod = BigInt('999999999999999999')
console.log(bigint) // 999999999999999999n
console.log(bigint === bigintByMethod) // true
console.log(1n + 2n) // 3n
console.log(25n / 10n) // 2n (division truncates)

Nullish Coalescing Operator (??)

The ?? operator returns the right‑hand operand only when the left‑hand operand is null or undefined , unlike || which treats any falsy value as false.

0 ?? 5 // 0
null ?? 5 // 5
undefined ?? 5 // 5
"" ?? 5 // ""

It cannot be combined directly with other operators without parentheses.

Optional Chaining Operator (?.)

Optional chaining stops evaluation and returns undefined when encountering null or undefined in a property chain, preventing runtime errors.

const obj = { foo: { bar: { baz: 42 } } }
console.log(obj?.foo?.bar?.baz) // 42

Dynamic Import

Dynamic import() loads modules on demand, reducing initial load time and memory usage compared to static import statements.

// Using then
import('/module/sneaker/test.js').then(module => { /* module logic */ })

// Using await
const getModule = await import('/module/sneaker/test.js')

String.prototype.matchAll

matchAll returns an iterator of all matches for a regular expression, which can be spread or converted to an array.

const string = 'Hello Sneaker,Where is the library?'
const regex = /[A-W]/g
const matches = string.matchAll(regex)
console.log(...matches)
// ['H', index:0, ...] ['S', index:6, ...] ['W', index:14, ...]

globalThis

globalThis provides a unified way to access the global object across browsers, Web Workers, and Node.js.

globalThis === window // true in browsers
globalThis === self   // true in Web Workers
globalThis === global // true in Node

Module Namespace Exports

Re‑export an entire module under a namespace without importing its bindings directly.

export * as ns from './module'
export { ns }

These features greatly simplify modern JavaScript development; regularly reviewing and applying them can improve code quality and performance.