ES2020 / ECMAScript 2020

optional chaining

객체의 undefined 체크시 여러번 해야하는 경우가 생기는데 아래처럼 사용하면 가독성도 향상되고 간단하게 사용이 가능하다.

const data = {
  board: {
    title: 'title'
  }
};

// before
const title = data && data.board && data.board.title

// after
const title = data?.board?.title

// 배열에서도 사용이 가능하다.
const list = [
  ['1', '2'],
];

const one = list?.[0]?.[1];
const two = list?.[0]?.[2];

matchAll

문자열에서 일치하는 정규식을 iteratior 형태로 반환. 기존 match와 사용법은 동일

// 1. 정규표현식 - for of 사용법
const str = 'abca';
const result = str.matchAll(/a/g);
for (const item of result) {
  console.log(item)
}
/*
  ['a', index: 0, input: 'abca', groups: undefined]
  ['a', index: 3, input: 'abca', groups: undefined]
*/

// 2. 문자열 - next 사용법
const str = 'abca';
const result = str.matchAll('a');
result.next(); // { value: ['a', index: 1, input: 'abca', groups: undefinded], done: false }
result.next(); // { value: ['a', index: 3, input: 'abca', groups: undefinded], done: false }
result.next(); // { value: undefined, done: true }

Promise.allSettled

기존 Promise.all 사용시 하나의 promise라도 reject가 된다면 나머지는 처리가 불가능하다.

allSettled를 사용하면 각각의 promise들을 관리할수 있다

const promiseList = [
  fetch("url1").then(data => data.json()),
  fetch("url2").then(data => data.json())
];
Promise.allSettled(promiseList)
  .then(results  => {
    // results에 url1, url2의 처리 결과에 대한 내용이 배열로 담겨있다.
    console.log(results);
  });

globalThis

Javascript 최상위 객체 global 객체에 접근하기 위해 추가된 방식

브라우저에서는 window, node.js 에서는 global객체를 사용하기때문에 추가된것으로 보인다.

//브라우저 실행 환경 기준
globalThis === window // true;

//Node 실행 환경 기준
globalThis === global // true;

null 병합 연산자 (Nullish coalescing Operator)

왼쪽 피연산자 값이 null이나 undefined일 경우에만 오른쪽값 반환

// || 연산자
const A1 = '' || 'default value' // 'default value'

// ?? 연산자 오직 null, undefined 일때만
const A2 = '' ?? 'default value' // ''
const A3 = null ?? 'default value' // 'default value'
const A4 = undefined ?? 'default value' // 'default value'

Dynamic import

import문을 비동기적으로 처리할때 사용

// then
import('/module.js')
  .then((module) => {
    module.default();
  });

// async/await
(async () => {
  const moduleUrl = '/module.js';
  const module = await import(moduleUrl)
  const total = module.sum(2, 2);
})();

BigInt

Number.MAX_SAFE_INTEGER 제한없이 사용이 가능하다.

Number.MAX_SAFE_INTEGER
// 9007199254740991

Number.MAX_SAFE_INTEGER + 10 -10
// 9007199254740990 👎

BigInt(Number.MAX_SAFE_INTEGER) + 10n -10n
// 9007199254740991n 👍