2020년, ES2020이 나왔습니다. 이제는 더 이상 ES11같은 숫자와 병용하지 않아도 될 것 같네요. 그냥 ES2020으로 부르겠습니다.

큰 기능보다는 편의기능이 계속 추가되고 있습니다.

matchAll

문자열에서 일치하는 정규표현식을 iterator 형식으로 반환합니다. 또한 캡처링 그룹(소괄호로 감싸진 것)도 결과로 반환합니다. 기존 정규표현식.exec과 비슷합니다.

정규표현식 뒤에 /g를 사용하지 않으면 Uncaught TypeError: String.prototype.matchAll called with a non-global RegExp argument 에러가 발생합니다

const matchAllResult = '11a22b'.matchAll(/(\d)(\D)/g);
matchAllResult.next(); // { value: ['1a', '1', 'a'], done: false }
matchAllResult.next(); // { value: ['2b', '2', 'b'], done: false } 
matchAllResult.next(); // { value: undefined, done: true } 

BigInt

자바스크립트는 큰 숫자를 표현하는 데 문제가 있었습니다. 2^53-1(Number.MAX_SAFE_INTEGER)보다 큰 숫자를 처리할 수가 없었는데요. BigInt 객체가 도입되어서 처리할 수 있게 되었습니다. 숫자 뒤에 n을 붙입니다.

1n + 1n; // 2n
typeof 1n; // bigint

단, BigInt끼리 계산하지 않으면 에러가 발생합니다. 또한 Big"Int"이기 때문에 소수점은 표현하지 못합니다. 그리고 숫자와도 같지 않습니다. 1n !== 1입니다. 단, 1n == 1이니 새로운 타입이 생겼다고 보셔도 되겠습니다. 그런데 또 일반 숫자와 크기 비교는 가능합니다. 정렬도 가능하고요. 0n도 falsy한 값입니다.

Promise.allSettled

기존 Promise.all을 쓸 때 많은 분들이 아쉬워했던 점이 여러 프로미스 중 하나만 실패해도 catch로 이동한다는 점이었습니다.

만약 이미지 업로드 3개를 하는 데 1,3 번째 이미지 업로드는 성공했지만 두 번째만 실패한 경우에도 catch로 이동합니다. 이 때 재시도를 해서 성공한 경우에는 1,3번째 이미지는 두번 올라가게 되는 문제가 발생하는 것이죠. allSettled는 개별적으로 성공 여부를 알려줍니다.

Promise.allSettled([upload(), upload(), upload()]).then((result) => {
  console.log(result[0]); // { status: 'fulfilled', value: 'ok' }
  console.log(result[1]); // { status: 'rejected', reason: 'too big' }  
  console.log(result[2]); // { status: 'fulfilled', value: 'ok' } 
});

성공한 경우 status는 fulfilled로, 반환값은 value로 나오고, 실패한 경우에는 status는 rejected, 반환값은 reason으로 나옵니다. 따라서 실패한 Promise만 추려서 재요청할 수 있습니다. all을 쓸 이유가 현저하게 줄어들 것 같네요.

globalThis

예전에는 브라우저의 전역객체는 window였고 Node.js의 전역객체는 global이었습니다. 둘이 달라서 분기처리를 해줘야 했던 경우가 많았는데 이제는 globalThis라는 것으로 통일되었습니다. 물론 기존 window나 global도 존재합니다.

브라우저에서는

globalThis === window // true;

노드에서는

globalThis === global; // true

로 동작합니다.

optional chaining

자바스크립트에서 가장 많이 보는 에러가 cannot read property X of undefined 또는 cannot read property Y of undefined입니다. 이를 방지하기 위해서

if (a) {
  if (a.b) {
    console.log(a.b.c);
  }
}

또는

console.log(a && a.b && a.b.c);

같은 보호를 해주었어야 했죠.

이제 옵셔널 체이닝 기능이 생겨서

console.log(a?.b?.c);

할 수 있습니다. 문법적으로 간단해졌다고 보시면 됩니다. a나 b가 존재하지 않는다면 전체 값이 undefined가 됩니다.

다만 메서드나 함수 사용 시 주의할 점은 ?. 자체가 연산자이므로 다음과 같이 해야 합니다.

const a = {
  b() {
    return 'zerocho';
  }
};
console.log(a.b?.());

a.b?()가 아니라 a.b?.()임을 기억하세요.

nullish coalescing

널 병합 기능으로 optional chaining처럼 편의성을 위해 추가된 기능입니다.

기존에는 삼항연산자나 기본값연산자(||) 보호연산자(&&)에서 조건문 부분에 null이나 undefined외에도 0, '', NaN, false 등은 거짓으로 처리되었습니다. 이제 널 병합 연산자(??)를 사용하면 null과 undefined인 경우에만 거짓으로 처리됩니다.

'' || 'zerocho'; // 'zerocho';
'' ?? 'zerocho'; // ''
null || 'zerocho'; // 'zerocho'
null ?? 'zerocho'; // 'zerocho' 
false ?? 'zerocho'; // false

null과 undefined를 다른 falsy한 값에서 발라내기 귀찮으셨던 분들께는 희소식이 될 것 같네요.

정식 스펙이 되지 못한 것들은 stage-3~0 시리즈로 정리해보겠습니다.