ECMAScript 2020의 새로운 점

원문: Pawel Grzybek, https://pawelgrzybek.com/whats-new-in-ecmascript-2020/

ECMAScript 2020의 새로운 기능이 확정되었다. 필자는 2016, 2017, 2018, 2019년과 마찬가지로 올해 새롭게 추가된 기능을 예제와 함께 살펴보려고 한다.

String.prototype.matchAll (제안자: Jordan Harband)

String.prototype의 match() 메서드는 정확히 일치하는 결과만을 반환하고 특정 정규 표현식 그룹에 관한 정보는 어떤 것도 제공하지 않았다. Jordan Harband 덕분에 이제 match()보다 더 많은 정보를 반환하는 String.prototype.matchAll을 사용할 수 있다. 완벽히 동일한 문자열 이외에 반복자(iterator)가 반환되는데, 이를 통해 모든 정규 표현식 캡처 그룹에 접근할 수 있다. Gorkem Yakin과 Daniel Ehrenberg가 제안하고 ECMAScript 2018에 추가된 명명된 캡처 그룹이 기억나는가? matchAll() 메서드는 명명된 캡처 그룹과 함께 사용할 때 빛을 발한다. 아래의 예시를 살펴보면 명확히 와닿을 것이다.

const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
const results = text.match(regexp);

console.log(results);
// [ '2019.01.29', '2019.01.30' ]

const text = "From 2019.01.29 to 2019.01.30";
const regexp = /(?<year>\d{4}).(?<month>\d{2}).(?<day>\d{2})/gu;
const results = Array.from(text.matchAll(regexp));

console.log(results);
// [
//   [
//     '2019.01.29',
//     '2019',
//     '01',
//     '29',
//     index: 5,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '29' }
//   ],
//   [
//     '2019.01.30',
//     '2019',
//     '01',
//     '30',
//     index: 19,
//     input: 'From 2019.01.29 to 2019.01.30',
//     groups: [Object: null prototype] { year: '2019', month: '01', day: '30' }
//   ]
// ]

import() (제안자: Domenic Denicola)

ECMAScript 2015에서 소개된 정적 모듈과는 반대로, Domenic Denicola가 제안한 동적 가져오기(Dynamic import)는 필요에 따라 모듈을 가져올 수 있다. 함수형 구문(Function.prototype를 상속하고 있다는 뜻은 아니다)인 import()는 프로미스(promise)를 반환한다. 동적 가져오기는 매우 강력해서 필요에 따라 모듈을 가져올 수 있으며, 계산된 모듈 이름을 사용할 수 있고, 스크립트 안에서 실행하는 것도 가능하다.

const modulePage = 'page.js';
import(modulePage)
    .then((module) => {
      module.default();
    });

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

BigInt - 임의 정밀도 정수 (제안자: Daniel Ehrenberg)

Daniel Ehrenberg 덕분에 앞으로 Number.MAX_SAFE_INTEGER를 제한 없이 사용할 수 있을 것이다. BigInt는 임의 정밀도로 정수를 표현하는 새로운 원시 값이다. BigInt 함수를 사용하거나 숫자 값에 n 접미사를 붙여서 숫자를 bigint 타입으로 변환할 수 있다.

Number.MAX_SAFE_INTEGER
// 9007199254740991

Number.MAX_SAFE_INTEGER + 10 -10
// 9007199254740990 👎

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

Promise.allSettled (제안자: Jason Williams, Robert Pamely and Mathias Bynens)

ECMAScript 2015부터 자바스크립트에는 프로미스를 결합하는 방법으로 Promise.all()과 Promise.race() 2가지가 있었다. Jason Williams, Robert Pamely and Mathias Bynens 덕분에 우리는 이제 Promise.allSettled()를 사용할 수 있다. Promise.allSettled()는 이행(fulfilled)되거나 거부(rejected)된 결과와 상관없이 모든 프로미스가 실행된 후에 어떤 처리를 하고 싶을 때 사용한다. 아래의 코드처럼 catch를 사용하지 않아도 된다!

Promise.allSettled([
  fetch("https://api.github.com/users/pawelgrzybek").then(data => data.json()),
  fetch("https://api.github.com/users/danjordan").then(data => data.json())
])
  .then(result => console.log(`All profile settled`));

Promise.any()도 어쩌면 ECMAScript에 곧 포함될 수도 있다. 필자는 이 모든 것을 "Promise combinators explained"에 설명해두었다.

globalThis (제안자: Jordan Harband)

자바스크립트에서 전역 this란 무엇인가? 브라우저에서는 window, 워커에서는 self, Node.js에서는 global, 그리고 다른 환경에서는 또다른 변수를 뜻한다. 이렇게 복잡한 상황은 이제 더는 일어나지 않을 것이다! Jordan Harband 덕분에 우리는 globalThis를 활용할 수 있다.

for-in 메커니즘 (제안자: Kevin Gibbons)

ECMAScript는 for-in 루프 순서를 자세히 설명하지 않았다. Kevin Gibbons 덕분에 for-in 메커니즘의 규칙이 확정되었다.

optional chaining (제안자: Gabriel Isenberg, Claude Pache, Dustin Savery)

객체 프로퍼티에 접근하기 위해 길게 이어진 체인은 오류가 나기 쉬우며 가독성도 좋지 않다. Gabriel Isenberg, Claude Pache, Dustin Savery 덕분에 이 체인이 훨씬 간단해졌다. 만약 당신이 TypeScript 사용자라면 optional chaining이 3.7 버전에서 이미 구현되었으므로 이 기능이 새롭게 느껴지지 않을 것이다.

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

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

null 병합 연산자 (제안자: Gabriel Isenberg)

Gabriel Isenberg이 한 환상적인 작업은 null 병합 연산자를 추가한 것이다. null 병합 연산자는 디폴트 값을 처리하기 위한 새로운 논리 연산자이다. 이 기능은 optional chaining과 관련되어 있다. || 연산자와는 반대로, null 병합 연산자인 ??는 좌변 값이 null 또는 undefined일 때만 평가한다.

"" || "default value"
// default value

"" ?? "default value"
// ""

const title = data?.article?.title ?? "What's new in ECMAScript 2020"

import.meta (제안자: Domenic Denicola)

Domenic Denicola가 제안한 import.meta는 현재 실행 중인 모듈에 호스트에 관한 메타 데이터 객체를 추가한다.

console.log(import.meta.url)
// file:///Users/pawelgrzybek/main.js

export * as ns from "mod"

개발자가 다른 모듈의 네임 스페이스를 새로운 이름의 특수 객체(exotic object)로 내보낼 수 있게 하는 유용한 기능이 추가되었다.

export * as ns from "mod"