[JavaScript] ECMAScript 2021 -- ES2021

▶▷ 서론◁◀

• ES2021은 새로운 특징이 많이 없지만 promise라는 조금 어려운 개념이 등장한다.
• 그럴 때는 이 링크를 타고 들어가서 promise 사용 이유를 보면 된다.
• https://sound-programming.tistory.com/335

[CS 지식 - 프론트엔드] 비동기와 동기

---

▶▷ 목차 ◁◀

1. (Promise) any
2. (String) replaceAll
3. Numeric Separators (_)

---

▶▷ 1. (Promise) any ◁◀

• Promise.any()

Promise.any() 메서드

• Promise.any()는 ES2021에서 도입된 메서드로, 주어진 프라미스 배열 중 하나라도 성공(resolve)하면 해당 프라미스를 반환한다. 모든 프라미스가 실패(reject)할 경우에만 AggregateError를 반환한다. 이는 첫 번째 성공하는 프라미스의 값을 반환하므로, Promise.race()와는 달리 성공하는 첫 번째 프라미스를 기다린다.

예제

// 첫 번째 Promise 생성
const myPromise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 200, "King");
});

// 두 번째 Promise 생성
const myPromise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Queen");
});

// 어떤 프라미스가 먼저 완료되든지 성공하면 실행
Promise.any([myPromise1, myPromise2]).then((x) => {
  console.log(x); // 출력: "Queen"
});

 

설명

1. myPromise1은 200ms 후 "King"으로 성공(resolved)
2. myPromise2는 100ms 후 "Queen"으로 성공(resolved)
3. Promise.any()는 가장 먼저 성공하는 myPromise2의 결과 "Queen"을 반환
4. Promise.any()는 실패(reject)하는 프라미스를 무시하며, 성공하는 프라미스가 반환될 때까지 기다림
5. 모든 프라미스가 실패할 경우에는 AggregateError를 반환

특징 및 장점

• 빠른 성공 반환: 여러 비동기 작업 중 하나라도 성공하면 결과를 즉시 반환해 응답 시간을 최적화할 수 있다.
• 모든 프라미스 실패 시: 모든 프라미스가 실패할 경우 AggregateError 객체가 반환되며, errors 속성을 통해 각 실패한 프라미스의 오류를 확인할 수 있다.

예제 (모든 프라미스가 실패하는 경우):

const myPromise1 = new Promise((resolve, reject) => {
  setTimeout(reject, 200, "Error in Promise 1");
});

const myPromise2 = new Promise((resolve, reject) => {
  setTimeout(reject, 100, "Error in Promise 2");
});

Promise.any([myPromise1, myPromise2]).catch((error) => {
  console.error(error); // 출력: AggregateError: All Promises were rejected
});

• 이 메서드는 첫 번째 성공을 기다리는 로직에 적합하며, 실패한 경우에만 특별한 처리를 할 때 유용하다.

---

▶▷ 2. (String) replaceAll ◁◀

• String replaceAll()

String.prototype.replaceAll() 메서드

• replaceAll() 메서드는 ES2021에서 도입된 메서드로, 문자열 내의 모든 일치하는 부분을 다른 문자열이나 정규 표현식으로 대체할 수 있게 해준다. 이 메서드는 기존의 replace() 메서드와 달리 모든 일치 항목을 한 번에 바꿀 수 있다.

기본 사용법

• 문자열 대체: 문자열을 인수로 제공하면 해당 문자열과 일치하는 모든 부분을 대체한다.
• 정규 표현식 대체: 정규 표현식을 인수로 제공할 수 있으며, 이때 글로벌 플래그(g)가 설정되어야 한다.

예제 1: 문자열 대체

let text = "Cats are great pets. Cats are independent.";
text = text.replaceAll("Cats", "Dogs");
console.log(text); // 출력: "Dogs are great pets. Dogs are independent."

 

예제 2: 대소문자 구분 대체

let text = "cats like to play. Cats are playful.";
text = text.replaceAll("cats", "dogs");
console.log(text); // 출력: "dogs like to play. Cats are playful."
text = text.replaceAll("Cats", "Dogs");
console.log(text); // 출력: "dogs like to play. Dogs are playful."

 

예제 3: 정규 표현식 사용

let text = "Cats, cats, and more cats.";
text = text.replaceAll(/Cats/g, "Dogs");
text = text.replaceAll(/cats/g, "dogs");
console.log(text); // 출력: "Dogs, dogs, and more dogs."

 

특징 및 주의사항

• 글로벌 플래그(g) 필요: 정규 표현식을 사용할 때는 반드시 g 플래그를 설정해야 한다. 그렇지 않으면 TypeError가 발생한다.
• 대소문자 구분: replaceAll() 메서드는 기본적으로 대소문자를 구분하므로, 대소문자 구분 없이 바꾸려면 정규 표현식에 i 플래그를 추가할 수 있다.

정규 표현식 예제:

let text = "Cats and CATS";
text = text.replaceAll(/cats/gi, "dogs");
console.log(text); // 출력: "dogs and dogs"

 

요약

• replaceAll() 메서드는 문자열 내 모든 일치 항목을 대체하는 데 적합하다.
• 정규 표현식을 사용할 때는 글로벌 플래그가 필요하다.
• 이 메서드는 ES2021부터 지원되므로 최신 브라우저 환경에서 사용 가능하다.

---

▶▷ 3. Numeric Separators (_) ◁◀

• Numeric Separators (_)

JavaScript 숫자 구분자 (_)

• ES2021에서 도입된 숫자 구분자는 긴 숫자를 더 읽기 쉽게 만들기 위해 숫자 사이에 밑줄(_)을 사용할 수 있도록 한다. 이 구분자는 숫자의 가독성을 높여주는 시각적 장치일 뿐, 숫자의 값이나 연산에 영향을 주지 않는다.

예제 1: 큰 숫자의 가독성 향상

const num = 1_000_000_000;
console.log(num); // 출력: 1000000000

• 1_000_000_000은 읽기 쉽게 1조처럼 보이지만, JavaScript는 이를 단순히 1000000000으로 처리한다.

예제 2: 숫자 비교

const num1 = 1_000_000_000;
const num2 = 1000000000;
console.log(num1 === num2); // 출력: true

• num1과 num2는 구분자가 사용되었는지에 관계없이 동일한 값을 가진다.

숫자 구분자 사용 위치

• 숫자 구분자는 숫자 내 어디에나 배치할 수 있는다. 단, 시작이나 끝, 소수점 바로 앞뒤에는 올 수 없다.

예제:

const num1 = 1_2_3_4_5;
console.log(num1); // 출력: 12345

 

사용 시 주의사항

• 시각적 장치: 숫자 구분자는 숫자의 가독성을 높이기 위한 시각적 장치일 뿐이지 실제 값이나 연산에는 영향을 미치지 않는다.
• 제약: 숫자 구분자는 숫자의 시작, 끝, 소수점 바로 앞뒤에는 사용할 수 없다.

// 잘못된 사용 예:
const num = _1000;    // 오류
const num = 1000_;    // 오류
const num = 1_.23;    // 오류

 

요약

• 숫자 구분자는 긴 숫자를 더 쉽게 읽을 수 있도록 만들어 준다.
• 이 구분자는 ES2021에서 도입되었으며, 최신 브라우저에서 지원된다.
• 숫자 구분자는 시각적 가독성을 위한 장치일 뿐, 숫자의 실제 값이나 연산에 영향을 주지 않는다.

---