ES2020

BigInt #

number 타입의 상한값(2^53-1, 9007199254740991, Number.MAX_SAFE_INTEGER) 이상의 숫자를 다룰 수 있는 데이터 타입

const myBigInt = BigInt("999999999999999999999999999999");
const mySecondBigInt = 999999999999999999999999999999n;

Dynamic imports #

ES모듈에 대한 비동기 임포트 지원

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });

let module = await import('/modules/my-module.js');

Nullish coalescing operator #

왼쪽 값(평가값) null 또는 undefined일 경우에만 오른쪽 값을 반환하는 논리 연산자

let falsyValue = ''; // falsy 값

console.log(falsyValue || 'Default Value'); // 'Default Value'
console.log(falsyValue ?? 'Default Value'); // ''

let undefinedValue = undefined; // undefined or null 값
console.log(undefinedValue ?? 'Default Value'); // 'Default Value'

Optional chaining operator #

연산자(?.) 앞의 객체 속성이 존재할 경우에만 접근 (존재하지 않는 경우에는 undefined 반환)

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); // expected output: undefined

console.log(adventurer.someNonExistentMethod?.()); // expected output: undefined

GlobalThis #

다양한 자바스크립트 실행환경에서 전역객체에 접근할 수 있는 변수
(전역객체 예: 브라우저-window, 노드-global, 웹워커-self 등)

// globalThis 폴리필 (ES2020 이전)
const getGlobal = () => {
  if (typeof self !== "undefined") { return self; }
  if (typeof window !== "undefined") { return window; }
  if (typeof global !== "undefined") { return global; }
  throw new Error('unable to locate global object');
};

getGlobal() === globalThis; // true (for browser, Web Worker and Node.js)
globalThis === window; // true (in browser)

Promise.allSettled()#

Promise.allSettled() 메서드는 fullfilled 또는 rejected되는 promise를 한꺼번에 처리할 수 있다.

const promise1 = Promise.resolve(3); // fullfilled
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo')); // rejected
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

String.matchAll()#

정규표현식에 매칭되는 모든 값들을 찾아서 이터레이터로 반환하는 메서드

const str = 'test1test2';
const regexp = /t(e)(st(\d?))/g;

const array = [...str.matchAll(regexp)];

console.log(array[0]); // ["test1", "e", "st1", "1"]

console.log(array[1]); // ["test2", "e", "st2", "2"]

For-in 루프의 순서 보장 #

for-in 루프로 객체의 enumerable properties를 순회할 때, 각 속성의 순서를 보장

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

참고#