ES2020에서 제공되는 기능

ES2020에서 제공되는 기능이 추가 및 정의되었습니다.

String.prototype.matchAll

match()를 사용하는 경우 정규식에 해당하는 값만을 반환하였습니다. 그러나 이제는 matchAll()을 사용하게 되면 반복자(iterator) 형태로 반환하게 되었습니다.

const regex = /t(e)(st(\d?))/g;
const string = 'test1test2';

string.match(regex); // gives ['test1', 'test2']

const matchs = string.matchAll(regex); // gives ['test1', 'test2']
matchs.next();
// { 
//    done: false
//    value: Array(4)
//      0: "test1"
//      1: "e"
//      2: "st1"
//      3: "1"
//    groups: undefined
//    index: 0
//    input: "test1test2"
//  }

import()

특정 조건에서 모듈을 import 해야 한다면, 이제는 import를 동적으로 할 수 있습니다.
import()를 사용하는 경우 Promise를 반환합니다.

if (true) {
  import('module1.js')
  .then(module => {
    console.debug('import module success');
  })
  .catch(err => {
    console.debug('import module fail');
  });
} else {
  console.debug('not import module');
}

BigInt

2^53보다 큰 경우를 표시할 수 있는 타입입니다.

const x = Number.MAX_SAFE_INTEGER; // ↪ 9007199254740991, 2^53 보다 1 작은 수

const y = x + 1; // ↪ 9007199254740992, 정상 작동입니다.

const z = x + 2 // ↪ 9007199254740992, 기대했던 값이 아닌 최대값으로 표시됩니다.

BigInt의 사용방법은 n을 붙여서 사용합니다.

Promise.allSettled

Promise.all는 Promise가 하나라도 에러가 발생하면, catch로 이동하게 됩니다.

  const promises = [ fetch('a.html'), fetch('b.html') ];

  try {
    await Promise.all(promises);
    console.debug('모든 Promise가 정상적으로 완료되었을때 해당 로그가 출력됩니다.');
  } catch(e) {
    console.debug('하나라도 에러가 발생하면 해당 로그가 출력됩니다.');
  }

이제는 Promise.allSettled을 사용함으로써 에러가 발생하더라도 catch로 이동하지 않습니다.

  const promises = [ fetch('a.html'), fetch('b.html') ];

  Promise.allSettled(promises).finally(() => {
    console.debug('성공 유무에 상관없이 해당 로그가 출력됩니다.');
  });

Promise.allSettled의 관한 상세한 내용은 여기에서 확인할 수 있습니다.

 

globalThis

전역 객체를 Web에서는 window, self, this, frames로 접근 가능하며, node.js에서는 global 또는 this로 접근 가능하였던 것을 Web, node.js에서 globalThis로 접근할 수 있게 되었습니다.

window === globalThis // true

global === globalThis // true

Optional Chaining

객체 프로퍼티의 undefined 또는 null인 경우를 체크하기 위한 방법입니다.

const response = { setting: null };
const animationDuration = response.settings?.animationDuration ?? 300;  // 300

Nullish coalescing Operator

?? 연산자 기준으로 왼쪽 값이 undefined 또는 null일 경우에 오른쪽 값을 반환합니다.

const response = {
settings: {
    nullValue: null,
    height: 400,
    animationDuration: 0,
    headerText: '',
    showSplashScreen: false
}
};

const undefinedValue = response.settings.undefinedValue ?? 'some other default'; // result: 'some other default'
const nullValue = response.settings.nullValue ?? 'some other default'; // result: 'some other default'
const headerText = response.settings.headerText ?? 'Hello, world!'; // result: ''
const animationDuration = response.settings.animationDuration ?? 300; // result: 0
const showSplashScreen = response.settings.showSplashScreen ?? true; // result: false

import.meta

현재 모듈의 metadata를 반환합니다.

import.meta // file:///home/user/my-module.js

es2020에 방문하시면 더 자세한 내용을 확인할 수 있습니다.