ECMAScript 2020

String.prototype.matchAll( )

- String.prototype.match( )와 유사하게 동작

- 정규 표현식과 매칭되는 문자열, 세부 정보를 포함하는 iterator를 반환

 

예제)

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( )

- promise 기반의 import( )sms Javascript 모듈을 동적으로 로딩

- 주요 브라우저에서 지원되고 있어서, 호환성 문제 X

 

예제)

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

- 새로운 Primitive number type

- Javascript에서 사용가능한 최대 정수 값 이상을 사용 가능

- BigInt( )로 숫자를 감싸거나, 숫자 뒤에 n을 붙혀서 사용

 

예제)

Number.MAX_SAFE_INTEGER
// 9007199254740991

Number.MAX_SAFE_INTEGER + 10 -10
// 9007199254740990 👎

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

 

Promise.allSettled

- 여러 개의 Promise list가 모두 처리(settled)(이행(fulfilled) 또는 거부(rejected))된 후, 각 Promise의 결과 값의 컬렉션을 반환

 

예제)

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`));

const promise1 = Promise.resolve(3);  
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));

Promise.allSettled([promise1, promise2]).  
  then((results) => results.forEach((result) => console.log(result.status)));

// 결과 값:
// "fulfilled"
// "rejected"

 

globalThis 

- 환경에 따라 다른 최상위 객체의 접근 방법이 달라서 나오는 불편함을 해소하기 위해 나옴

-- 최상위 객체 접근 방법) 브라우저의 window, node.js의 global 같은 접근 방법

- 주요 브라우저에서 지원

 

예제)

globalThis.setTimeout;  // window.setTimeout  

 

for-in

- 명확하지 않았던 for-in 열거 순서에 대한 방식을 정의

 

예제)

var o = {  
  p1: 'p1',
  p2: 'p2',
  p3: 'p3',
};

var keys = [];  
for (var key in o) {  
  if (key === 'p1') {
    o.p4 = 'p4';
  }
  keys.push(key);
}

// ['p1', 'p2', 'p3']
// IE8의 경우: ['p1', 'p2', 'p3', 'p4']
console.log(keys); 

 

Optional chaining (?.)

- 새로운 연산자 ?.

- 연결된 체인의 속성 값이 nullish(null 또는 undefined)인 경우, 오류를 발생시키는 대신 undefined를 반환

 

예제)

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

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

 

Nullish coalescing Operator (??)

- 새로운 연산자인 ??

- 좌측 값이 null 또는 undefined인 경우에만 평가

 

예제)

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

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

 

import.meta

- 현재 실행 중인 모듈에 호스트에서 사용 가능한 메타데이터 객체를 설정

 

예제)

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

 

export * as ns from “mod”

- 모듈을 모두 import한 후, 새로운 이름(namespace)로 export할 수 있게 하는 문법

 

예제)

export * as ns from "mod"

 

 

 

 

출처

- https://pawelgrzybek.com/whats-new-in-ecmascript-2020/

- https://d2.naver.com/helloworld/4268738