JavaScript 2021
JavaScript 2021 (ES12): ECMAScript 2021의 주요 기능
- *ECMAScript 2021 (ES12)**는 2021년에 발표된 JavaScript 표준으로, 개발자들이 더 간결한 코드를 작성할 수
있도록 다양한 기능이 추가되었습니다. 논리 할당 연산자, 숫자 구분자,
Promise.any(), 그리고 WeakRefs와 같은 기능들이 포함되어, 코드의 가독성과 성능을 더욱 향상시킵니다.
이 가이드는 **ES12(ECMAScript 2021)**에서 도입된 주요 기능과 사용 예시를 설명합니다.
1. 논리 할당 연산자 (&&=, ||=, ??=)
논리 할당 연산자는 기존의 논리 연산자를 활용하면서 값을 할당할 수 있도록 결합한 연산자입니다. 이는 기존의
&&, ||, ?? 연산자와
할당 연산자를 결합한 새로운 문법으로, 더 간결한 조건부 할당이 가능합니다.
1.1. &&= (AND 할당 연산자)
let x = true;
x &&= false;
console.log(x); // false
1.2. ||= (OR 할당 연산자)
let y = null;
y ||= 'default';
console.log(y); // 'default'
1.3. ??= (Nullish 병합 할당 연산자)
let z = null;
z ??= 'default';
console.log(z); // 'default'
주요 특징
&&=: 값이 참일 때만 값을 할당.||=: 값이 Falsy일 때만 값을 할당.??=: 값이 **null또는undefined*일 때만 값을 할당.
2. 숫자 구분자 (Numeric Separators)
숫자 구분자는 큰 숫자를 다룰 때 가독성을 높이기 위해 **밑줄(_)**을 사용하여 숫자를
구분할 수 있습니다. 이는 특히 금액이나 전화번호처럼 긴 숫자 데이터를 처리할 때 유용합니다.
2.1. 숫자 구분자 사용 예시
const billion = 1_000_000_000;
console.log(billion); // 1000000000
const creditCardNumber = 1234_5678_9012_3456;
console.log(creditCardNumber); // 1234567890123456
주요 특징
- *밑줄(
_)**을 사용하여 숫자를 그룹화할 수 있음. - 숫자의 값에는 영향을 주지 않으며, 가독성을 높이기 위한 목적.
3. Promise.any()
- *
Promise.any()*는 주어진 프로미스 중 하나라도 성공하면 즉시 그 결과를 반환하는 메서드입니다. 만약 모든 프로미스가 실패하면, 에러가 발생합니다. 이는 **Promise.race()*와 비슷하지만, 성공한 프로미스만 반환한다는 점에서 다릅니다.
3.1. Promise.any() 사용 예시
const p1 = Promise.reject('Error 1');
const p2 = Promise.reject('Error 2');
const p3 = Promise.resolve('Success');
Promise.any([p1, p2, p3])
.then(result => console.log(result)) // 'Success'
.catch(error => console.log(error));
주요 특징
- 하나의 프로미스가 성공하면 그 결과를 반환.
- 모든 프로미스가 실패한 경우, 에러 객체를 반환.
4. WeakRef와 최종화 등록자 (FinalizationRegistry)
WeakRef는 약한 참조를 생성하여, 가비지 컬렉터가 객체를 수집할 수 있도록 허용합니다. 이를 통해 메모리 누수를 방지할 수 있으며, FinalizationRegistry를 통해 객체가 메모리에서 해제될 때 후속 작업을 수행할 수 있습니다.
4.1. WeakRef 사용 예시
let obj = { name: 'Alice' };
const weakRef = new WeakRef(obj);
// 참조가 유지되지 않으면, obj는 가비지 컬렉터에 의해 수집될 수 있음
console.log(weakRef.deref()); // { name: 'Alice' }
obj = null; // obj의 참조를 해제
console.log(weakRef.deref()); // undefined (객체가 수집됨)
4.2. FinalizationRegistry 사용 예시
const registry = new FinalizationRegistry((value) => {
console.log(`${value}이(가) 가비지 수집됨`);
});
let obj = { name: 'Alice' };
registry.register(obj, 'Object');
// obj 참조 해제
obj = null;
// 가비지 컬렉션이 실행되면 'Object'가 가비지 수집됨 메시지 출력
주요 특징
WeakRef: 객체의 약한 참조를 통해 가비지 컬렉션이 가능해짐.FinalizationRegistry: 객체가 수집될 때 후속 작업을 수행.
5. String.prototype.replaceAll()
replaceAll() 메서드는 문자열에서 일치하는 모든 부분을 한 번에 교체할 수 있습니다. 기존의
**replace()**는 첫 번째 일치 항목만 교체했지만, **replaceAll()**은 모든 일치
항목을 교체합니다.
5.1. replaceAll() 사용 예시
const str = 'apple, apple, orange';
const newStr = str.replaceAll('apple', 'banana');
console.log(newStr); // 'banana, banana, orange'
주요 특징
- 문자열에서 일치하는 모든 부분을 한 번에 교체할 수 있음.
- 기존 **
replace()*는 첫 번째 일치 항목만 교체.
6. 정적 클래스 블록 (Static Class Blocks)
정적 클래스 블록을 사용하면 클래스 내부에서 정적 변수를 초기화하거나 정적 메서드 로직을 설정할 수 있습니다. 이는 정적 필드의 설정 및 초기화에 유용합니다.
6.1. 정적 클래스 블록 사용 예시
class MyClass {
static counter;
static {
this.counter = 0;
console.log('클래스가 초기화됨');
}
static increment() {
this.counter++;
}
}
console.log(MyClass.counter); // 0
MyClass.increment();
console.log(MyClass.counter); // 1
주요 특징
- 클래스의 정적 블록에서 초기화 작업을 수행.
- 정적 변수나 메서드의 초기화에 유용.
요약
- *ES12(ECMAScript 2021)**은 JavaScript의 가독성과 성능을 개선하는 다양한 기능을 추가했습니다.
- 논리 할당 연산자(
&&=,||=,??=): 조건부 할당을 간결하게 작성할 수 있는 새로운 연산자. - 숫자 구분자: 큰 숫자를 **밑줄(
_)**로 구분해 가독성을 높임. Promise.any(): 프로미스 중 하나라도 성공하면 결과 반환, 모든 프로미스가 실패하면 에러 반환.- WeakRefs와 FinalizationRegistry: 약한 참조를 통한 가비지 컬렉션 및 메모리 관리 개선.
String.prototype.replaceAll(): 문자열에서 모든 일치 항목을 한 번에 교체하는 메서드.- 정적 클래스 블록: 클래스의 정적 필드를 초기화할 수 있는 새로운 문법.
ES12는 JavaScript 개발을 더 직관적이고 효율적으로 만들어 주며, 코드의 가독성과 성능을 크게 향상시킵니다.