728x90
최신 ECMAScript 버전 요약:
- ECMAScript 2024 (ES2024): 미발표, 현재는 그 기능이 어떻게 될지에 대한 제안들이 논의되고 있는 상태
- ECMAScript 2023 (ES2023): ECMAScript 2023은 2023년 6월에 발표
- ECMAScript 2022 (ES2022): 주요 기능으로는 top-level await와 class fields가 포함
- ECMAScript 2021 (ES2021): 새로운 배열 메서드인 Array.prototype.at(), 논리적 연산자 &&=, ||=, ??= 등을 포함
ECMAScript 2023 (ES2023) 주요 특징
Array.prototype.toSorted(), toSpliced(), toReversed(), with():
- 배열을 수정하지 않고 새로운 배열을 반환하는 메서드가 추가
- 이 메서드는 배열을 "정렬", "자르기", "반전", "인덱스 값 교체"하는 기능을 제공
const arr1 = [3, 1, 4, 1, 5, 9];
const sortedArr = arr1.toSorted();
console.log(sortedArr); // [1, 1, 3, 4, 5, 9]
const arr2 = [1, 2, 3, 4, 5];
const splicedArr = arr2.toSpliced(1, 2); // index 1부터 2개 삭제
console.log(splicedArr); // [1, 4, 5]
const arr3 = [1, 2, 3];
const reversedArr = arr3.toReversed();
console.log(reversedArr); // [3, 2, 1]
const arr4 = [1, 2, 3];
const newArr = arr4.with(1, 99);
console.log(newArr); // [1, 99, 3]Hashbang Syntax:
- 파일의 첫 번째 줄에 #!을 사용할 수 있게 되어 스크립트를 셸 스크립트처럼 실행 가능
WeakRefs improvements:
- WeakRef 객체의 기능을 개선하여 더 유용하게 사용 가능
ECMAScript 2022 (ES2022) 주요 특징
Top-level await:
- 이제 최상위 수준에서 await를 사용 가능
- 모듈에서 직접 await를 사용하여 비동기 작업을 처리 가능
const result = await fetch('https://example.com');
Private methods and fields in classes:
- 클래스에서 private 메서드와 필드를 사용 가능
- 이를 통해 클래스 내에서만 접근할 수 있는 필드와 메서드 생성 가능
class MyClass {
#privateField = 42;
#privateMethod() {
console.log('Private method');
}
}ECMAScript 2021 (ES2021) 주요 특징
String.prototype.replaceAll():
- 문자열 내에서 모든 일치를 교체할 수 있는 메서드가 추가
const str = 'foo bar foo';
const result = str.replaceAll('foo', 'baz');
Logical Assignment Operators:
- &&=, ||=, ??= 연산자 추가
- 이들은 조건에 따라 변수에 값을 할당하는 방식
let x = 5;
x &&= 10; // x는 5 (Truth 값이므로 변경되지 않음)
let y = 0;
y &&= 10; // y는 0 (Falsy 값이므로 10으로 변경)
// 기존 방식
if (x) {
x = 10;
}
// 논리 할당 연산자
x &&= 10;
---
let a = 0;
a ||= 42; // a는 42 (Falsy 값이므로 변경됨)
let b = "hello";
b ||= "world"; // b는 "hello" (Truth 값이므로 변경되지 않음)
// 기존 방식
if (!a) {
a = 42;
}
// 논리 할당 연산자
a ||= 42;
---
let c = null;
c ??= "default"; // c는 "default" (null이므로 변경됨)
let d = 0;
d ??= 100; // d는 0 (Falsy지만 null이 아님, 변경되지 않음)
// 기존 방식
if (c === null || c === undefined) {
c = "default";
}
// 논리 할당 연산자
c ??= "default";
Promise.any():
- 주어진 프로미스들 중 가장 먼저 해결된 프로미스를 반환하는 Promise.any()가 추가
const p1 = new Promise((_, reject) => setTimeout(reject, 100, "Error 1"));
const p2 = new Promise((resolve) => setTimeout(resolve, 200, "Success!"));
const p3 = new Promise((_, reject) => setTimeout(reject, 300, "Error 2"));
Promise.any([p1, p2, p3]).then(console.log).catch(console.error);
// 출력: "Success!" (p2가 가장 먼저 성공)- 모든 Promise가 실패하면 AggregateError 발생
WeakRefs (Weak References) & FinalizationRegistry
- WeakRef: 가비지 컬렉션(GC)이 실행될 때 객체가 자동으로 정리되도록 약한 참조를 생성
- FinalizationRegistry: 객체가 가비지 컬렉션될 때 콜백을 실행
let obj = { data: "important" };
const weakRef = new WeakRef(obj);
console.log(weakRef.deref()); // { data: 'important' }
obj = null; // 이제 obj는 가비지 컬렉션 대상
// weakRef.deref()가 undefined를 반환할 가능성 있음const registry = new FinalizationRegistry((heldValue) => {
console.log(`${heldValue} has been garbage collected`);
});
let obj2 = { data: "temp" };
registry.register(obj2, "obj2");
obj2 = null; // 이제 obj2는 가비지 컬렉션 대상728x90