# ECMAScript 2024 새로운 기능

• 2024년 6월 26일에 ECMAScript 2024이 승인되어 공식적으로 표준이 되었습니다.

1. 동기식 이터러블(iterable) 그룹 기능

• Object.groupBy() 메소드가 추가되면서 별도의 연산을 통해 그룹화 기능이 추가되었습니다.

const result = Object.groupBy([1, 2, 3, 4, 5], (num) => { return num % 2 === 0 ? 'even' : 'odd'})

// 출력: {even: [2, 4], add: [1, 3, 5]}
console.log(result)

• Map.groupBy 메소드가 추가되면서 위와 동일하게 별도의 연산을 통해 그룹화 기능이 추가되었습니다.

const result = Map.groupBy([1, 2, 3, 4, 5], (num) => { return num % 2 === 0 ? 'even' : 'odd'})

// 출력: Map {key: odd, value: [1, 3, 5]}, {key: even, value: [2, 4]}
console.log(result)

2. Promise.withResolvers()

• Promise.withResolvers()는 새로운 Promise 객체와 resolve, reject 함수를 동시에 반환합니다. 기존에 new Promise를 통해 새로운 Promise를 만드는 과정을 간략하게 생성할 수 있게 됩니다.

// new Promise를 활용한 Promise 생성
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// Promise.withResolvers()를 활용한 Promise 생성
const { promise, resolve, reject } = Promise.withResolvers();

3. ArrayBuffers에 크기 조절과 전송 기능 추가

• resize() 메소드를 통해 크기를 조정할 수 있습니다.

const buffer = new ArrayBuffer(8, { maxByteLength: 16 });

// 출력: 8
console.log(buffer.byteLength);


buffer.resize(12);

// 출력: 12
console.log(buffer.byteLength);

• transfer() 메소드를 통해 전송할 수 있게 됩니다.

// ArrayBuffer 생성
const buffer = new ArrayBuffer(8);
const view = new Uint8Array(buffer);
view[1] = 2;
view[7] = 4;

// 버퍼를 같은 크기로 복사
const buffer2 = buffer.transfer();
console.log(buffer.detached); // true
console.log(buffer2.byteLength); // 8
const view2 = new Uint8Array(buffer2);
console.log(view2[1]); // 2
console.log(view2[7]); // 4

4. Atomics.waitAsync()

• Atomics.waitAsync()는 JS에서 제공하는 공유 메모리의 특정 위치에서 비동기적으로 대기하고 Promise를 반환하는 함수입니다. 기존에 제공하는 Atomics.wait 와 기능이 비슷하지만 논 블록킹으로 동작하며 메인 스레드를 사용할 수 있습니다.
• 해당 메소드는 Int32Array 혹은 BigInt64Array에서만 동작합니다.

const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);

// index: 0, expected value: 0, timeout: 1000
// { async: true, value: Promise {<pending>} }
const result = Atomics.waitAsync(int32, 0, 0, 1000); // // result.value은 프로미스

Atomics.notify(int32, 0);

5. 문자열 형식 보장

• 우선 surrogate pair 개념을 알아야 무엇인지 알아야 이해할 수 있다.
• 자바스크립트에서 문자열은 UTF-16으로 처리하는데 UTF-16는 문자를 표현할 때 2바이트 / 4바이트를 가변적으로 사용한다.
• 한글 같은 경우 2바이트로 표현할 수 있지만 이모지나 한자 등은 2바이트로 표현이 불가능하여 4바이트를 사용한다.
• 즉 두 글자를 표현하는 공간을 한 글자로 표현할 때 사용하는 것을 surrogate pair라고 한다.

const str= '😆';

// 1글자지만 lenght는 2로 출력
console.log(str.length);

• 일반적인 반복문을 통해 문자열을 출력해보면 4바이트로 표현된 이모지는 2개의 문자열로 쪼개지면서 잘못된 데이터를 반환한다. ( for of 를 사용하면 올바르게 출력 가능 )

const str= '😆안녕';

for(let i=0; i< str.length; i++){
  // 출력 �, �, 안, 녕
  console.log(str[i]);
}

• isWellFormed() 메소드를 통해 문자열이 surrogate pair 문자열인지 확인할 수 있습니다. false를 반환하게 된다면 4바이트(2글자) 공간을 활용해야 하는 문자열인데 2바이트(1글자)만 포함되었다는 의미입니다.

const str= '😆안녕';

for(let i=0; i< str.length; i++){
  if(!str[i].isWellFormed()){
    // 이모지에서 출력
    console.error('not wellFormed');
  }
  console.log(str[i]);
}

• 만약 toWellFormed() 메소드를 사용한다면 surrogate pair가 깨진 문자열을 U+FFFD(�)로 치환하여 출력합니다. 일반적인 브라우저는 isWellFormed()를 사용하면 자동으로 치환해주고 있습니다.

참고

• https://2ality.com/2024/06/ecmascript-2024.html#the-editors-of-ecmascript-2024
• https://github.com/tc39/ecma262/releases/tag/es2024