자바스크립트 ES2021: 최신 기능과 실무 활용법

자바스크립트는 웹 개발에서 필수적인 언어로 자리 잡으면서 지속적으로 개선되고 있습니다. ES2021(ECMAScript 2021)은 최신 업데이트로, 기존의 불편함을 해소하고 개발자의 생산성을 높이는 다양한 기능을 제공합니다. 이번 블로그에서는 ES2021에서 도입된 주요 기능을 심층 분석하고, 실무에서 어떻게 활용할 수 있는지 살펴보겠습니다.

---

🔎 ES2021의 주요 기능과 개선 사항

ES2021은 코드의 가독성을 높이고, 비동기 처리 및 메모리 관리를 개선하는 기능들을 도입했습니다. 주요 기능은 다음과 같습니다.

• String.prototype.replaceAll()
• Promise.any()
• WeakRef 및 FinalizationRegistry
• 논리 할당 연산자 (&&=, ||=, ??=)
• 숫자 구분 기호 (Numeric Separators)

각 기능을 자세히 살펴보겠습니다.

---

1. String.prototype.replaceAll() - 문자열 전체 변경하기

기존 replace() 메서드는 문자열에서 첫 번째 일치하는 항목만 변경할 수 있었기 때문에, 모든 항목을 변경하려면 정규 표현식을 사용하거나 replace()를 여러 번 호출해야 했습니다.

💡 ES2021 개선 사항

이제 replaceAll()을 사용하면 문자열 내 모든 일치 항목을 한 번에 변경할 수 있습니다.

✅ 사용 예시

const text = "사과와 사과가 있습니다.";
const newText = text.replaceAll("사과", "배");
console.log(newText); // "배와 배가 있습니다."

정규 표현식을 사용하지 않아도 되므로 코드가 더 간결하고 가독성이 좋아집니다.

---

2. Promise.any() - 가장 먼저 성공하는 프로미스 반환

기존 Promise.race()는 가장 먼저 완료된 프로미스를 반환하지만, 실패한 경우에도 그대로 반환되는 문제가 있었습니다. 반면, Promise.any()는 가장 먼저 성공한 프로미스를 반환하며, 모든 프로미스가 실패하면 AggregateError를 발생시킵니다.

✅ 사용 예시

const promise1 = new Promise((_, reject) => setTimeout(() => reject("실패 1"), 100));
const promise2 = new Promise(resolve => setTimeout(() => resolve("성공 1"), 200));
const promise3 = new Promise(resolve => setTimeout(() => resolve("성공 2"), 300));

Promise.any([promise1, promise2, promise3])
    .then(result => console.log(result)) // "성공 1"
    .catch(error => console.error(error));

이 기능을 활용하면 여러 개의 비동기 작업 중 하나라도 성공하는 즉시 결과를 반환하여 더욱 빠르고 효율적인 처리가 가능합니다.

---

3. WeakRef 및 FinalizationRegistry - 효율적인 메모리 관리

자바스크립트의 가비지 컬렉션(GC)은 강한 참조가 없는 객체를 자동으로 정리하지만, 경우에 따라 개발자가 메모리 관리를 보다 정교하게 제어해야 할 필요가 있습니다.

💡 ES2021 개선 사항

• WeakRef: 약한 참조를 제공하여 객체가 필요하지 않을 경우 자동으로 정리될 수 있도록 지원합니다.
• FinalizationRegistry: 객체가 가비지 컬렉션될 때 특정 콜백을 실행할 수 있습니다.

✅ 사용 예시

let obj = { name: "테스트 객체" };
const weakRef = new WeakRef(obj);

obj = null; // 강한 참조 제거

setTimeout(() => {
    const derefObj = weakRef.deref();
    console.log(derefObj); // undefined일 가능성이 있음 (이미 가비지 컬렉션됨)
}, 1000);

이 기능들은 대규모 애플리케이션의 메모리 관리에 유용하며, 성능 최적화가 필요한 경우 적극 활용할 수 있습니다.

---

4. 논리 할당 연산자(Logical Assignment Operators) - 조건부 할당 간소화

기존에는 변수의 상태를 확인한 후 특정 값을 할당하려면 if 문을 사용해야 했습니다. ES2021에서는 논리 연산자와 할당 연산자를 결합한 새로운 논리 할당 연산자가 도입되었습니다.

✅ 연산자 종류

• &&= : 왼쪽 피연산자가 truthy이면 오른쪽 값을 할당
• ||= : 왼쪽 피연산자가 falsy이면 오른쪽 값을 할당
• ??= : 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 값을 할당

✅ 사용 예시

let a;
let b = false;

a ||= b; 
console.log(a); // false (a는 falsy 값이므로 b가 할당됨)

let c;
c &&= true;
console.log(c); // undefined (c는 falsy)

let d = null;
d ??= "기본값";
console.log(d); // "기본값" (d가 null이므로 오른쪽 값 할당)

이 연산자들을 사용하면 코드가 훨씬 간결해지며, 불필요한 조건문을 줄일 수 있습니다.

---

5. 숫자 구분 기호(Numeric Separators) - 긴 숫자의 가독성 향상

큰 숫자는 읽기 어려울 수 있습니다. ES2021에서는 _(언더스코어)를 숫자 사이에 삽입하여 가독성을 높일 수 있도록 개선되었습니다.

✅ 사용 예시

const billion = 1_000_000_000; 
console.log(billion); // 1000000000

const hexValue = 0xFF_FF_FF; 
console.log(hexValue.toString(16)); // "ffffff"

이 기능은 금융 데이터, 과학 계산, 대형 데이터 처리 등에서 숫자를 더 직관적으로 표현하는 데 유용합니다.

---

🚀 ES2021을 활용한 코드 최적화

ES2021의 새로운 기능들은 코드의 가독성을 높이고, 유지보수를 쉽게 하며, 성능을 최적화하는 데 큰 도움을 줍니다.

📌 ES2021을 활용하는 방법

1. replaceAll()로 간편하게 문자열 수정
2. Promise.any()로 비동기 작업의 성능 최적화
3. WeakRef와 FinalizationRegistry로 메모리 관리 개선
4. 논리 할당 연산자로 간결한 코드 작성
5. 숫자 구분 기호(_)로 가독성 향상

이러한 기능들을 프로젝트에 적극 적용하면 개발자의 생산성을 극대화할 수 있습니다.

---

📢 결론

ES2021은 자바스크립트 개발자들에게 보다 강력한 기능과 효율적인 코드 작성 방법을 제공합니다. 특히, 문자열 처리, 비동기 프로그래밍, 메모리 관리, 논리 연산 개선 등의 기능은 실무에서 즉각적인 효과를 볼 수 있는 필수 기능입니다.