ECMAScript 2021 요약

출처:https://news.hada.io/topic?id=4519
GeekNews 글을 인용했습니다.

짧은 요약

• 논리 할당 연산자 : &&= || ??=
• 숫자 Separator 지원 : 1_000
• Promise.any & AggregateError 추가
• String.prototype.replaceAll
• WeakRefs 와 FinalizationRegistry 객체

Logical Assignment Operators

//"Or Or Equals"
x ||= y;
x || (x = y);

// "And And Equals"
x &&= y;
x && (x = y);

// "QQ Equals"
x ??= y;
x ?? (x = y);

const updateID = user => {
  
  // 기존에 falsy한 값을 특정 기본 값으로 변경하고 싶을 때
  if (!user.id) user.id = 1

  // or 연산자를 이용해서 하는 방식
  user.id = user.id || 1

  // 이번 업데이트를 통해 이렇게도 쓸 수 있습니다.
  user.id ||= 1
}

function setOpts(opts) {
  
  // 기존에 이렇게 썻었다면,
  opts.cat ?? '냥'
  
  // 이제 이렇게도 쓸 수 있습니다. (굳이??)
  opts.dog ??= '멍';
}

setOpts({ cat: '냥' })

console.log(opts.dog)
// "멍"

이 부분은 기존에 null 병합 연산자로도 충분한 것 같은데..
혹시 잘 아시는 분은 댓글로 남겨주시면 감사하겠습니다...

Numeric Separators

1_000_000_000           // 10억
101_475_938.38          // 1억

let fee = 123_00;       // 123
let fee = 12_300;       // 12,300
let amount = 12345_00;  // 12,345 (12345.00)
let amount = 123_4500;  // 123.45 (123.4500)
let amount = 1_234_500; // 1,234,500

0.000_001 // 100만분의 1
1e10_000  // 10^10000 -- (굳이??)
0xA0_B0_C0; // 16진법에서도 사용 가능

Promise.any and AggregateError

Promise.any([
  fetch('https://v8.dev/').then(() => 'home'),
  fetch('https://v8.dev/blog').then(() => 'blog'),
  fetch('https://v8.dev/docs').then(() => 'docs')
]).then((first) => {
  // 어떤 promise든 resolve 된다면 반환
  console.log(first);
  // → 'home'
}).catch((error) => {
  // 모든 promise가 rejected 됐을 때
  console.log(error);
});

위 코드에서 잡히는 error는 AggregateError입니다.

AggregateError: 한 작업에서 여러개의 에러가 발생했을 경우(예를 들어 Promise.any()), 하나의 에러로 랩핑해서 반환하고 싶을 때 사용합니다.

String.prototype.replaceAll

// String.prototype.replaceAll(searchValue, replaceValue)

// 정규식표현으로 '' 입니다.
const reg = '/(?:)/g'

'x'.replace('', '_');
// → '_x'

'xxx'.replace(reg, '_');
// → '_x_x_x_'

'xxx'.replaceAll('', '_');
// → '_x_x_x_'

WeakRefs and FinalizationRegistry Objects

let target = {};
let wr = new WeakRef(target);

wr.deref() // target or undefined

// wr와 target은 같은 값이 아닙니다.


// 새로운 레지스트리를 생성
const registry = new FinalizationRegistry(heldValue => {
  // ....
});

registry.register(myObject, "some value", myObject);

// 이후 나중에 'myObject'를 정리하고 싶다면
registry.unregister(myObject);

가비지 콜렉션 관련한 함수인 것 같은데.. 이 부분에 대해 깊이 알지 못해 직역 수준의 번역만 했습니다.

마찬가지로 이 부분도 잘 아시는 분이 계신다면 댓글로 남겨주시면 감사하겠습니다!