소개 

JavaScript는 특히 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나입니다. ECMAScript 버전 덕분에 매년 많은 새 유용한 기능이 JavaScript로 릴리스되고 있습니다. ECMAScript 2021은 JavaScript에서 사용할 수 있는 흥미롭고 강력한 기능을 제공합니다. 아직 출시되지 않았지만 우리는 그들을 볼 수 있습니다.

이 기사에서는 JavaScript에서 알아야 할 몇 가지 유용한 ES2021 기능을 알아 봅니다. 바로 시작하겠습니다.

1. Numeric Separators 

숫자 구분 기호는 ES2021에 도입 된 유용한 기능 중 하나입니다. 밑줄 _을 사용하여 숫자를 구분하여 JavaScript에서 큰 숫자를 더 쉽게 읽을 수 있습니다.

아래 예를 살펴보십시오.

let myNumber = 1_000_000;
console.log(myNumber); //output: 1000000
let num = 0.000_0002;
console.log(num); //output: 2e-7

이렇게 하면 코드를 편집 할 때 큰 숫자를 훨씬 쉽게 읽을 수 있습니다.

2. Replace All 

replaceAll() 메서드는 ES2021에 대해 정말 좋아하는 기능 중 하나입니다. 이 방법을 사용하면 정규식을 사용하지 않고 문자열에 지정한 모든 문자를 바꿀 수 있습니다.

replaceAll() 메소드는 두 개의 매개 변수를 사용합니다. 대체 할 문자와 대체 할 문자입니다.

다음 예는 이해하는 데 도움이 됩니다.

let myStr = ‘Prograssing’;
console.log(myStr.replaceAll(“s”, “m”)); //output: Programming

보시다시피 replaceAll()을 사용하여 모든 s 문자를 m 문자로 대체했습니다. 이렇게 하면 문자열의 내용을 쉽게 바꿀 수 있으며 이러한 경우 더 이상 정규식을 사용할 필요가 없습니다.

3. Weak Reference 

ES2021의 또 다른 멋진 기능은 WeakRef()입니다. 다른 개체에 대한 약한 참조를 유지하는 데 사용됩니다. 즉, 가비지 수집기가 개체를 수집하는 것을 방지하지 않습니다. 객체를 영원히 기억하고 싶지 않을 때 유용합니다.

새로운 WeakRef를 생성하기 위해 WeakRef()에 대한 인수로 객체를 전달하고 약한 참조에 대해 deref()를 호출하여 참조를 읽습니다.

아래 예를 살펴보십시오.

const myObject = new WeakRef({
name: ‘John’,
age: 25
});
//Read the object.
console.log(myObject.deref()); //output: {name: “John”, age: 25}
//Access name.
console.log(myObject.deref().name); //output: John

이것은 당신에게 아이디어를 제공하는 간단한 예입니다. 필요한 경우에만 약한 참조를 사용하는 것이 좋습니다.

4. Promise Any 

Promise.any()는 약속 배열을 인수로 받습니다. 모든 promise가 해결되면 Promise.any()에 의해 첫 번째로 해결 된 약속이 반환됩니다. 모든 약속이 거부되면 오류가 발생합니다.

다음은 그 예입니다.

const promise1 = new Promise((resolve, reject) => {
 resolve(‘promise1 was resolved.’);
});
const promise2 = new Promise((resolve, reject) => {
 resolve(‘promise2 was resolved.’);
});
const promise3 = new Promise((resolve, reject) => {
 resolve(‘promise3 was resolved.’);
});
let result = Promise.any([promise1, promise2, promise3]);
console.log(result); //output: promise1 was resolved.

위에서 볼 수 있듯이 Promise.any()는 가장 먼저 해결 된 promise1을 반환했습니다. 모든 promise가 거부되면 거부 이유가 포함 된 AggregateError가 발생합니다.

5. Logical Assignment Operators 

ES2021은 &&=, ||= 및 ??=의 세 가지 유용한 논리 할당 연산자를 도입했습니다.

논리 할당 연산자 &&=는 두 값 사이에 사용됩니다. 첫 번째 값이 진실이면 두 번째 값이 할당됩니다.

다음은 그 예입니다.

let firstNumber = 5;
let secondNumber = 20;
firstNumber &&= secondNumber; //output: 20
console.log(firstNumber); //output: 20
//Here is an equivalent to it:
if(firstNumber){
 firstNumber = secondNumber;
}

논리 할당 연산자 ||=도 두 값 사이에 사용됩니다. 첫 번째 값이 진실 (거짓)이 아니면 두 번째 값이 할당됩니다.

다음은 그 예입니다.

let firstNumber = null;
let secondNumber = 10;
firstNumber ||= secondNumber; //output: 10
console.log(firstNumber); //output: 10
//Here is an equivalent to it:
if(!firstNumber){
 firstNumber = secondNumber;
}

논리 할당 연산자 ??=는 첫 번째 값이 null인지 undefined 확인합니다. 그렇다면 두 번째 값이 할당됩니다.

다음은 그 예입니다.

//when first value is null or undefined
let firstNumber = null;
let secondNumber = 10;
firstNumber ??= secondNumber; //output: 10
console.log(firstNumber); //output: 10
//when first value is truthy
firstNumber = 9;
firstNumber ??= secondNumber; //output: 9
console.log(firstNumber); //output: 9
//Here is an equivalent to it:
if(firstNumber == null || firstNumber == undefined){
 firstNumber = secondNumber;
}

보시다시피 이러한 연산자를 사용하면 조건문을 사용하지 않고도 값을 훨씬 쉽게 할당 할 수 있습니다.

마지막 생각들 

ES2021에는 개발자의 삶을 훨씬 쉽게 만들어주는 유용한 JavaScript 기능이 있습니다. 그렇기 때문에 우리는 항상 최신 기술에 대한 업데이트를 유지해야 합니다.

https://towardsdev.com/javascript-es2021-features-d864eccad081