JavaScript ES2024 새 기능

ES2024(ECMAScript 2024)는 JavaScript의 최신 표준으로, 개발자 경험을 향상시키는 여러 새로운 기능을 포함합니다. 주요 기능들을 실용적인 예제와 함께 살펴봅니다.

1. Array groupBy

배열을 특정 키로 그룹화하는 메서드가 추가되었습니다.

const products = [
    { name: "사과", category: "과일", price: 1000 },
    { name: "바나나", category: "과일", price: 1500 },
    { name: "당근", category: "채소", price: 800 },
    { name: "오이", category: "채소", price: 600 }
];

// Object.groupBy
const grouped = Object.groupBy(products, p => p.category);
// {
//   과일: [{name: "사과"...}, {name: "바나나"...}],
//   채소: [{name: "당근"...}, {name: "오이"...}]
// }

// Map.groupBy (Map 반환)
const groupedMap = Map.groupBy(products, p => p.category);

2. Promise.withResolvers()

Promise와 resolve/reject 함수를 동시에 반환합니다.

// 기존 방식
let resolve, reject;
const promise = new Promise((res, rej) => {
    resolve = res;
    reject = rej;
});

// ES2024 새 방식
const { promise, resolve, reject } = Promise.withResolvers();

// 활용 예시
function createDeferred() {
    const { promise, resolve, reject } = Promise.withResolvers();
    return { promise, resolve, reject };
}

const deferred = createDeferred();
setTimeout(() => deferred.resolve("완료!"), 1000);
await deferred.promise; // "완료!"

3. Well-Formed Unicode Strings

// 잘못된 Unicode 문자열 확인
const str = "hello\\uD800world";  // lone surrogate
str.isWellFormed();  // false

// 잘못된 문자 수정
str.toWellFormed();  // "hello�world"

// 정상 문자열
"안녕하세요".isWellFormed();  // true

4. ArrayBuffer 전송 및 리사이징

// 리사이징 가능한 ArrayBuffer
const buffer = new ArrayBuffer(8, { maxByteLength: 16 });
buffer.resize(12);  // 크기 조정
buffer.byteLength;  // 12

// 다른 스레드로 전송
const transferred = buffer.transfer();
buffer.detached;  // true (원본은 분리됨)

// 복사 전송
const copy = buffer.transferToFixedLength(16);

5. Atomics.waitAsync()

메인 스레드를 블로킹하지 않고 대기합니다.

const buffer = new SharedArrayBuffer(4);
const view = new Int32Array(buffer);

// 비동기 대기
const result = Atomics.waitAsync(view, 0, 0);
if (result.async) {
    result.value.then(status => {
        console.log("깨어남:", status);
    });
}

// 다른 스레드에서 알림
Atomics.notify(view, 0);

6. RegExp v 플래그 (유니코드 집합)

// v 플래그로 유니코드 집합 사용
const emojiRegex = /[\\p{Emoji}--\\p{ASCII}]/v;
emojiRegex.test("😀");  // true
emojiRegex.test("a");   // false

// 문자열 프로퍼티
/^\\p{RGI_Emoji}$/v.test("👨‍👩‍👧‍👦");  // true

// 집합 연산
const korean = /[\\p{Script=Hangul}&&\\p{L}]/v;

브라우저 지원

Polyfill 예시

// groupBy polyfill
if (!Object.groupBy) {
    Object.groupBy = function(arr, fn) {
        return arr.reduce((acc, item) => {
            const key = fn(item);
            (acc[key] ??= []).push(item);
            return acc;
        }, {});
    };
}