<ES2021> ES2021 Features

1. 소개

 - ES2021 에는 다음과 같은 기능들이 추가되었다.

 

github.com/tc39/proposals

 

2. 기능

* Replace All

 - es2021에서 드디어 자바스크립트에도 replaceAll 이 생겼다. 자바스크립트의 replace는 가장 처음에 등장하는 문자열을 변경하는 메서드이다. 따라서 해당하는 문자열을 모두 바꾸려면 반복문을 돌리든지 정규표현식의 g 옵션을 사용했어야 했다.

 

const str = 'harry is a developer. harry is smart.';
const test1 = str.replace('harry', 'IU');

console.log(test1); // IU is a developer. harry is smart.

 

 - 위의 코드를 보면 'harry' 라는 문자열은 2개 이지만 먼저 나온 문자열만 바뀐 것을 볼 수 있다. replaceAll 메서드를 사용하면 아래와 같다.

 

const str = 'harry is a developer. harry is smart.';
const test2 = str.replaceAll('harry', 'IU');

console.log(test2); // IU is a developer. IU is smart.

 

* Promise any

 - Promise에 새로운 방식이 또 추가되었다. all 메서드를 알고 있다면 사용법은 비슷하다. 

 

 - 먼저 all을 사용한 코드를 보자.

 

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'slow'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 10, 'fast'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'mid'));
Promise.all([promise1, promise2, promise3]).then((data) => {
  console.log(data);
});
// [ 'slow', 'fast', 'mid' ]

 

 - 반환값이 순서대로 배열형태로 출력되었다. 이번에는 any를 사용해보자.

 

const promise1 = new Promise((resolve) => setTimeout(resolve, 1000, 'slow'));
const promise2 = new Promise((resolve) => setTimeout(resolve, 10, 'fast'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 100, 'mid'));
Promise.any([promise1, promise2, promise3]).then((data) => {
  console.log(data);
});
// fast

 

 - 결과값은 놀랍게도 중간에 있던 fast가 출력된다. 이를통해 any는 가장먼저 resolve된 값을 반환한다는 것을 알 수 있다.

 

* WeakRefs

 - WeakRefs는 약한 참조(Weak References)를 의미한다. 이는 가비지 컬렉터와 관련된 내용이다. 가비지 컬렉터는 참조가 계속되고 있으면 그 객체를 지우지 않는다. 하지만 굳이 참조를 유지하고 싶지 않을 수도 있다. 이럴 때 사용하는 것이 약한 참조이다.

 

let obj = {
  name: 'harry',
  age: 20,
};

const weakObj = new WeakRef(obj);

const printName = () => {
  console.log(weakObj.deref().name);
};

obj = null;

setInterval(printName, 5000);

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

 

 - deref는 약한 참조를 읽는 메서드이다. 위 코드를 실행시키면 일정 시간동안은 name을 잘 출력하지만 결국 에러를 출력하게 된다.

 

 - WeakRef는 매우 적은 경우에만 유용하다. 가비지 컬랙터가 도는 시간이나 방법은 엔진이나 환경에 따라 달라지므로 WeakRef 사용은 피하는 것을 권장한다고 한다.

 

 

* Logical Assignment Operators

 - 논리 할당 연산자가 추가되었다. 논리 할당 연산자를 알아보기 전에 아래의 코드를 살펴보자.

 

let x = '';
let y = '';
let z = '';

x = x || 'harry';
console.log(x);

y = y && 'harry';
console.log(y);

z = z ?? 'harry';
console.log(z);

 

 - 논리 연산자를 통해 각각의 변수에 할당한 것을 볼 수 있다. ||는 truthy한 값을 찾으므로 "harry"가 출력될 것이다. &&은 falsy한 값을 출력하므로 "" 가 출력된다. 그리고 ??은 nullish 하지 않은 값을 찾으므로 "" 가 출력된다.

 

 - 위의 코드는 es2021의 논리할당연산자로 줄일 수 있다. 눈치챘겠지만 아래와 같이 사용한다.

 

let x = '';
let y = '';
let z = '';

x ||= 'harry';
console.log(x);

y &&= 'harry';
console.log(y);

z ??= 'harry';
console.log(z);

 

 

* Numeric Separators

 - 숫자 구분을 위한 기호가 추가되었다. 특별한 기능이 있는 기호가 아니라 단순히 시각적인 편리함을 위해 도입된 것이다.

 

const x = 100_000;
console.log(x === 100000) // true

 

 

---

참고

 

 

GitHub - tc39/proposals: Tracking ECMAScript Proposals

 

ES2021 / ES12 새로운 기능

 

ES2021 features list

 

ES2020, ES2021에 추가된 기능