ECMAScript 2021

https://yrnana.dev/post/2021-03-13-ecmascript-2021

1. String.prototype.replaceAll

const str = 'Hello World! Hello Javascript!'
str.replace('Hello', 'Hi') // Hi World! Hello Javascript!
str.replace(/Hello/g, 'Hi') // Hi World! Hi Javascript!
str.replaceAll('Hello', 'Hi') // Hi World! Hi Javascript!

2. Promise.any()

Promise.all()이 모든 promise들이 resolve 되면 resolve 되는 함수라면, Promise.any()는 하나라도 resolve 된다면 resolve 된다.

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise_1'), 100)
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => resolve('promise_2'), 500)
})

const t0 = performance.now()
async function test1() {
  await Promise.all([p1, p2])
  console.log(performance.now() - t0) // 약 500ms
}
test1()

const t1 = performance.now()
async function test2() {
  await Promise.any([p1, p2])
  console.log(performance.now() - t1) // 약 100ms
}
test2()

3. WeakRef

WeakRef 인스턴스는 등록한 객체가 메모리에 있으면 해당 객체를 반환하고, 가비지 콜렉터가 객체를 삭제했다면 undefined를 반환한다.

const obj = { key: 'value' }
const weakRef = new WeakRef(obj)
// ...
weakRef.deref() // obj or undefined

FinalizationRegistry 인스턴스는 등록한 객체가 가비지 콜렉티드 되면 콜백 함수를 실행한다.

const obj = { key: 'value' }
const registry = new FinalizationRegistry((value) => {
  console.log(`${value} has been garbage collected`)
})
registry.register(obj, 'registered object')

4. Logical assignment operators (??=, &&=, ||=)

a += 3처럼 ??, &&, ||도 할당 연산자를 사용할 수 있다.

a &&= b // a = a && b
a ||= b // a = a || b
a ??= b // a = a ?? b

5. Separators for numeric literals (1_000)

숫자가 커질수록 자릿수 구분이 어려운데 _로 구분을 넣을 수 있다.

let number = 1_000_000
let binary = 0b1010_0001_1000
let hex = 0xA0_B0_C0

참고

• https://tc39.es/ecma262/2021/