ES2020, ES2021 새로운 기능

ES2020 (ES11)

1. Dynamic Import

필요한 상황에서 동적으로 파일을 import 할 수 있다. 필요한 상황에서만 임포트 시킬 수 있다.

// before

import user from './user.js';

if(isUser) {
  let name = user.name;
}

// after

if(isUser) {
  import('./user.js').then(uesr => {
    let name = user.name;
  })
}

2. Promise.allSettled

Promise.all() 은 모든 작업이 성공해야 실행되는 반면, Promise.allSettled() 는 도중에 실패 되더라도 모든 실행을 할 수 있다.

const p1 = new Promise((resolve, reject) => resolve('p1 resolved'));
const p2 = new Promise((resolve, reject) => reject('p2 rejected'));
const p3 = new Promise((resolve, reject) => resolve('p3 resolved'));

Promise.all([p1, p2, p3])
.then(res => console.log('result: ',  res))
.catch(err => console.log('err: ', err));

// err: p2 rejected

Promise.allSettled([p1, p2, p3])
.then(res => console.log('result: ',  res))
.catch(err => console.log('err: ', err));

/*
result: [
  { status: 'fulfilled', value: 'p1 resolved' },
  { status: 'rejected', reason: 'p2 rejected' },
  { status: 'fulfilled', value: 'p3 resolved' }
]
*/

3. Nullish Coalescing Operator

a ?? b 문법은 a가 null이나 undefined 일 때만 b를 반환한다.

false ? false : 'TEST' // 'TEST'
false ?? 'TEST' // false

4. Optional Chaining

해당 객체가 undefined나 null인 경우에 TypeError 대신 undefined를 얻는다.

const obj = {
  a: { b: true }
};

// before
console.log(obj.b); // undefined
console.log(obj.b.a); // Uncaught TypeError: Cannot read properties of undefined (reading 'a')
if(obj.b && obj.b.a) { 
  console.log('true');
}

// after
console.log(obj.b?.a); // undefined

ES2021 (ES12)

1. replaceAll

지정한 모든 문자열을 특정 값으로 변경한다.

const base = 'aabbaabb';
console.log(base.replace('a', 'c'); // cabbaabb

// before
console.log(base.replace(/\a/g, 'c')); // ccbbccbb

// after
console.log(base.replaceAll('a', 'c')); // ccbbccbb

2. Promise.any

Promise 중 하나라도 성공하면 첫번째로 성공한 Promise 값을 반환하고, 모두 실패했을 때 에러를 반환한다.

const p1 = new Promise((resolve, reject) => resolve('p1 resolved'));
const p2 = new Promise((resolve, reject) => reject('p2 rejected'));
const p3 = new Promise((resolve, reject) => resolve('p3 resolved'));
const p4 = new Promise((resolve, reject) => reject('p4 rejected'));

Promise.any([p1, p2, p3])
.then(res => console.log('result: ', res))
.catch(err => console.log('err: ', err));
// result: p1 resolved

Promise.any([p2, p4])
.then(res => console.log('result: ', res))
.catch(err => console.log('err: ', err));
// err:  AggregateError: All promises were rejected

3. WeakRef

약한 참조는 캐시 또는 매핑을 저장하는데 오랜 시간동안 메모리를 유지하고 싶지 않은 경우 사용한다. 자바스크립트 엔진 내에서는 가비지 컬렉터가 끊임없이 동작하며, 도달할 수 없는 객체를 메모리에서 제거한다.

사용을 권장하진 않는다.

let fruit = { name: 'apple' };

const fruitWeakRef = new WeakRef(fruit);
const printName = () => {
  cosole.log(fruitWeakRef.deref().name); // apple
};

fruit = null; // 일반 참조 제거
setInterval(printName, 3000);

/*
  apple
  apple
  apple
  ...
  Uncaught TypeError: Cannot read properties of undefined (reading 'name')
*/

4. Logical assignment operators

논리 연산자를 간단하게 사용할 수 있다.

let a = true;

// before

a = a || false; // true
a = a && false; // false
a = a ?? false; // true

// after

a ||= false; // true
a &&= false; // false
a ??= false; // true