2021년에 배워야할 4가지 Javascript ES2021 기능

본 글은 아래 글을 번역한 글입니다. 부족해도 이해해 주세요😆

https://medium.com/dailyjs/4-javascript-es2021-es-12-features-that-you-should-learn-in-2021-d8cd6343bb12

4 JavaScript ES2021 (ES 12) Features That You Should Learn in 2021

매년 자바스크립에 추가되는 새로운 기능은 4단계 프로세스를 거친다. 살펴볼 새로운 기능은 현재 4단계이고, 마지막 단계이다.

2021년 중반에 출시될 것으로 예상된다.

String.prototype.replaceAll

String.prototype.replaceAll()은 일치하는 모든 string을 다른 string value로 변경한다.

자바스크립트에서 .replace() 메소드는 패턴의 첫 번째 인스턴스만 변경될 것이다.

let string = "Wow, he doesn't like Porsche? I guess he must be crazy!";

string.replace("he", "she");
// Result: "Wow, she doesn't like Porsche? I guess he must be crazy!"

string에서 패턴이 일치하는 모든 문자열을 변경하려면 global Regular Expression(RegEx)를 사용해야만 했다.

RegEx는 안 좋은 방법은 아니지만, 성능 면에서 좋은 방법은 아니다.

새로운 .replaeAll() 메소드는 RegEx를 생성하는 것 없이 일치하는 모든 문자열을 변경할 수 있다.

let string = "Wow, he doesn't like Porsche? I guess he must be crazy!";

string.replaceAll("he", "she");
// Result: "Wow, she doesn't like Porsche? I guess she must be crazy!"

Logical Assignment Operators

논리 연산자(??, &&, ||)를 알고 있을 것이다. 그리고 할당 연산자(=)도 알고 있을 것이다.

논리 할당 연산자는 논리 연산자(??, &&, ||)와 할당 연산자(=)를 조합한다.

예시) a ||= b는 a가 true일 때, a를 리턴하고, a가 false일 때, b를 리턴한다.

// 오래된 방법
if(!a){
    a = b;
}
// Or
a = a || b;

// 논리 할당 연산자 사용
a ||= b;

예시) a &&= b는 a가 true일 때, b를 리턴하고, a가 false일 때, a를 리턴한다.

// 오래된 방법
if(a){
    a = b;
}
// Or
a = a && b;

// 논리 할당 연산자 사용
a &&= b;

Numeric Separators

실제 코드에서 성능상 영향은 아주 적지만 외관상의 변화가 있다. 코드에서 숫자 값을 입력할 때마다 하는 실수를 예방하는데 도움이 될 수 있다.

아주 적은 양으로 숫자를 읽는 속도가 빨라질 것이다.

const MILLION = 1_000_000; // 1000000
const BILLION = 1_000_000_000; // 1000000000

이 것은 숫자의 마침표나 쉼표 뒤에서도 사용할 수 있다.

const BIGNUMBER = 1234_5678_9_0; // 1234567890

const PI = 3.1415_9265_3589; // 3.141592653589

// ERROR!!!!!!
const BAD_PI = 3.14_15_; // SyntaxError
const NO_MILLION = _1_000_000; // ReferenceError

숫자의 처음이나 끝에 _를 사용하면 에러를 리턴한다는 것을 주의하자.

Promise.any

Promise.any 메소도는 promise의 배열을 수용하고, 첫 번째 항목이 FULFILLED 상태가 되는 즉시 리턴된다.

유사항 방법인 Promise.race가 이미 있다.

그러나 Promise.race는 첫 번째 promise가 실행되고, FULFILLED가 아니어도 리턴된다.

Promise.race는 두 번째가 성공일지라도 reject된 promise가 리턴된다.

대조적으로 Promise.any메소드는 Promise 중 하나라도 SUCCEEDS인 경우만 리턴된다.

Promise.any([get("www.medium.com"), get("www.thatsanegg.com")])
    .then(result => {
        console.log('First promise succeded: ', result);
    });

모든 promise가 reject되면, Promise.any는 새로운 타입인 AggregateError를 발생시킨다.

AggregateError는 여러 오류가 단일 오류로 래핑되는 오류를 나타낸다.