[JS] ES2024에는 어떤 기능이 추가되었을까?

매년 Ecma International에서는 JavaScript의 표준인 ECMAScript(줄여서 ES)를 개정하여 발표한다.
2024년 7월에 발표된 ES2024는 JavaScript에 새로운 기능을 추가하고 기존 기능을 더욱 강화하여 개발자들의 작업을 보다 효율적으로 만들어 주는 다양한 개선 사항을 포함하고 있는데,

이번 글에서 다뤄보고자 한다.

[JS] ES2024에는 어떤 기능이 추가되었을까?

1. Object.groupBy 및 Map.groupBy

ES2024 이전의 불편함: 배열을 특정 기준으로 그룹화할 때, 개발자는 reduce()나 forEach()를 사용해 수동으로 데이터를 그룹화해야 했다. 이 방식은 코드가 길어지고 가독성이 떨어지며, 실수를 유발할 가능성도 있다.

이전 코드 (ES2024 이전):

const animals = [
  { name: 'Lion', type: 'Mammal' },
  { name: 'Shark', type: 'Fish' },
  { name: 'Eagle', type: 'Bird' },
  { name: 'Whale', type: 'Mammal' }
];

const grouped = animals.reduce((acc, animal) => {
  const type = animal.type;
  if (!acc[type]) {
    acc[type] = [];
  }
  acc[type].push(animal);
  return acc;
}, {});

console.log(grouped);

ES2024 이후 코드:

const grouped = Object.groupBy(animals, animal => animal.type);
console.log(grouped);

이점: Object.groupBy를 통해 데이터를 손쉽게 그룹화할 수 있으며, 코드가 훨씬 간결해지고 가독성이 높아졌다.

2. Promise.withResolvers

ES2024 이전의 불편함: Promise 객체의 resolve와 reject 함수를 외부에서 사용하려면, 생성자 함수 내부에서 이를 수동으로 할당해야 했다. 이는 코드가 장황해지고 실수를 유발할 수 있는 불편함이 있다.

이전 코드 (ES2024 이전):

let resolvePromise, rejectPromise;
const promise = new Promise((resolve, reject) => {
  resolvePromise = resolve;
  rejectPromise = reject;
});

// 나중에 resolve 호출
resolvePromise('Success!');
promise.then(console.log); // 'Success!' 출력

ES2024 이후 코드:

const { resolve, reject, promise } = Promise.withResolvers();
resolve('Success!');
promise.then(console.log); // 'Success!' 출력

이점: Promise.withResolvers를 사용하면 코드가 더 간단해지고, Promise의 비동기 흐름을 쉽게 제어할 수 있다.【28†source】.

3. Temporal API

ES2024 이전의 불편함: Date 객체는 시간대나 국제화를 다룰 때 여러 제약이 있다. 시간 계산이 복잡하고 부정확한 경우가 많아, 복잡한 날짜 계산에는 추가적인 라이브러리(예: Moment.js)가 필요했다.

이전 코드 (ES2024 이전):

const now = new Date();
const birthDate = new Date('1990-01-01');
const age = now.getFullYear() - birthDate.getFullYear();
console.log(`나이: ${age}`);

ES2024 이후 코드:

const now = Temporal.Now.plainDateTimeISO();
const birthDate = Temporal.PlainDate.from('1990-01-01');
const age = now.since(birthDate).years;
console.log(`나이: ${age}`);

이점: Temporal API는 더욱 정밀한 시간 계산과 국제화 작업을 지원하며, 복잡한 날짜 계산을 간소화한다.

4. RegExp /v 플래그

ES2024 이전의 불편함: 유니코드 지원을 위해 /u 플래그를 사용할 수 있었지만, 복잡한 유니코드 패턴을 처리하는 데는 한계가 있었습니다. 다국어 지원이나 이모티콘 등의 유니코드 문자를 정확하게 처리하려면 복잡한 정규 표현식이 필요했습니다.

이전 코드 (ES2024 이전):

const regex = /\p{Emoji}/u;
console.log(regex.test('😊')); // true 또는 제한된 유니코드 처리

ES2024 이후 코드:

const regex = /\p{Emoji}/v;
console.log(regex.test('😊')); // true

이점: /v 플래그는 유니코드 패턴을 더 효과적으로 처리할 수 있게 해주며, 특히 다국어 지원 애플리케이션에서 유용하다【28†source】.

5. 향상된 에러 cause 속성

ES2024 이전의 불편함: 에러 발생 시 원인을 명확히 추적하기 어렵고, 중첩된 에러가 발생할 경우 디버깅이 복잡하고, 개발자는 에러의 원인을 수동으로 처리해야 했다.

이전 코드 (ES2024 이전):

try {
  throw new Error('기본 에러');
} catch (err) {
  const newError = new Error('새 에러');
  newError.cause = err;
  throw newError;
}

ES2024 이후 코드:

try {
  throw new Error('기본 에러');
} catch (err) {
  throw new Error('새 에러', { cause: err });
}

이점: cause 속성을 통해 에러 발생 원인을 명확히 추적할 수 있어, 디버깅과 오류 처리가 더욱 쉬워졌다.

6. Symbol.prototype.description

ES2024 이전의 불편함: Symbol 객체의 설명에 접근하기 위해서는 toString() 메서드를 사용해야 했으며, 불필요한 문자열이 포함되는 경우가 많아 코드의 가독성이 떨어졌다.

이전 코드 (ES2024 이전):

const sym = Symbol('mySymbol');
console.log(sym.toString()); // 'Symbol(mySymbol)' - 불필요한 'Symbol()' 포함

ES2024 이후 코드:

const sym = Symbol('mySymbol');
console.log(sym.description); // 'mySymbol'

이점: description 속성을 통해 심볼의 설명을 간결하게 접근할 수 있어, 코드의 가독성과 유지보수성이 개선되었다.

결론

ES2024에 추가된 Object.groupBy, Promise.withResolvers, Temporal API, RegExp /v 플래그, 향상된 에러 cause 속성, 그리고 Symbol.prototype.description 기능을 통해 조금 더 간편하게 코드를 작성해보자.