Dev/javascript

ECMAScript 2024 : ES2024 - 주요 추가 기능

괴발짜응 2025. 2. 22. 08:44
반응형

 

2025년도 벌써 2개월이 다 지나갔는데 왜 2024년도에 발표된 ES2024에 대해서 포스팅을 하냐고?

 

현재 가장 최신 자바스크립트 버전은 ES2024이기 때문이다.

주요 추가 기능은 아래와 같다.

 

1. Object.groupBy / Map.groupBy

컬렉션(ex: 배열)의 각 요소를 특정 기준에 따라 그룹화할 수 있도록 한다.

 

Object.groupBy:

배열을 순회하며, 제공된 콜백 함수의 반환값(그룹 키)에 따라 요소들을 일반 객체의 프로퍼티로 그룹화한다.

const data = [
  { year: "2024", id: 0 },
  { year: "2023", id: 1 },
  { year: "2024", id: 2 },
];
const grouped = Object.groupBy(data, (el) => el.year);
console.log(grouped);
// {
//   "2024": [{ year: "2024", id: 0 }, { year: "2024", id: 2 }],
//   "2023": [{ year: "2023", id: 1 }]
// }

 

Map.groupBy:

동일한 기능을 수행하지만 결과를 순서가 보장되고 다양한 키 타입(문자열뿐만 아니라 객체도 가능)을 지원하는 Map 객체로 반환한다.

const data = [
  { year: "2024", id: 0 },
  { year: "2023", id: 1 },
  { year: "2024", id: 2 },
];
const groupedMap = Map.groupBy(data, (el) => el.year);
console.log(groupedMap);
// Map { "2024" => [ { year: "2024", id: 0 }, { year: "2024", id: 2 } ],
//       "2023" => [ { year: "2023", id: 1 } ] }

 

데이터를 그룹화하는 로직을 직접 구현할 필요 없이, 한 줄의 코드로 간결하게 그룹화를 수행할 수 있다.

 

2. Promise.withResolvers

새로운 Promise를 생성하면서 해당 Promise의 resolve와 reject 함수를 별도로 얻어오는 패턴을 간소화한다.

 

기존방식:

기존에는 아래와 같이 Promise 생성 시 외부 변수에 resolve와 reject를 할당하는 패턴을 사용했다.

let resolve, reject;
let promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

 

ES2024 방식:

Promise.withResolvers() 메서드는 한 번의 호출로 resolve, reject 그리고 promise를 동시에 반환한다.

const { resolve, reject, promise } = Promise.withResolvers();

 

비동기 작업에서 프로미스의 제어 함수를 깔끔하게 추출할수 있어 코드 가독성과 유지보수성이 향상된다. 

 

3. Set.prototype의 새로운 집합 연산 메서드

집합(Set) 객체에 대해 흔히 사용하는 연산(ex: 합집합, 교집합, 차집합 등)을 내장 메서드로 지원하여, 직접 알고리즘을 구현할 필요 없이 간편한게 집합 연산을 수행할 수 있다.

 

Set.prototype.union(iterable): 합집합

현재 Set과 주어진 Iterable의 요소를 모두 포함한 새 Set을 반환한다.

 

Set.prototype.intersection(iterable): 교집합

현재 Set과 주어진 Iterable에 공통으로 존재하는 요소만을 포함하는 새 Set을 반환한다.

 

Set.prototype.difference(iterable): 차집합

현재 Set에만 존재하는 요소들(주어진 이터러블에는 없는)을 포함하는 새 Set을 반환한다.

 

Set.prototype.symmetricDifference: 대칭차집합

현재 Set과 주어진 이터러블 중 한쪽에만 있는 요소들(즉, 양쪽에 모두 있지 않은)을 포함하는 새 Set을 반환한다

// 두 집합 정의
const setA = new Set([1, 2, 3]);
const setB = new Set([2, 3, 4]);

// 1. union: 두 집합의 합집합 (모든 요소를 포함)
const union = setA.union(setB);
console.log("Union:", Array.from(union)); 
// 예상 출력: Union: [1, 2, 3, 4]

// 2. intersection: 두 집합의 교집합 (공통 요소)
const intersection = setA.intersection(setB);
console.log("Intersection:", Array.from(intersection)); 
// 예상 출력: Intersection: [2, 3]

// 3. difference: setA에서 setB에 없는 요소들 (차집합)
const difference = setA.difference(setB);
console.log("Difference (setA - setB):", Array.from(difference)); 
// 예상 출력: Difference (setA - setB): [1]

// 4. symmetricDifference: 두 집합 중 한쪽에만 있는 요소들 (대칭 차집합)
const symmetricDifference = setA.symmetricDifference(setB);
console.log("Symmetric Difference:", Array.from(symmetricDifference)); 
// 예상 출력: Symmetric Difference: [1, 4]

 

 

4. RegExp의 /v 플래그

기존의 /u 플래그보다 개선된 유니코드 지원을 제공하여, 정규 표현식에서 더 정확한 유니코드 문자 집합 표기가 가능하도록 한다. /v 플래그는 정규식 내에서 유니코드 문자, 집합 그리고 서브셋 표현을 보다 정밀하게 처리한다. 다만, 기존 코드와의 하위 호환성에 주의해야 하므로, 사용 시 해당 동작을 충분히 검토할 필요가 있다.

 

4.1 /u 플래그의 한계와 /v 플래그의 필요성

  • /u 플래그
    기존의 /u 플래그는 정규 표현식이 유니코드 코드 포인트를 올바르게 해석하도록 도와주지마, 복잡한 유니코드 문자 집합이나 최신 Unicode 데이터베이스의 세밀한 규칙을 완벽하게 반영하지 못하는 한계가 있음.
  • 필요성
    이러한 한계를 극복하기 위해 제안된 /v 플래그는, 정규 표현식 엔진이 최신 유니코드 데이터에 기반한 집합 표기법과 속성 처리 알고리즘을 사용할 수 있도록 한다.

4.2 /v 플래그의 주요 특징

  • 향상된 유니코드 집합 지원
    /v 플래그는 새로운 집합 표기법과 함께 동작하여, 복잡한 유니코드 문자 범위를 보다 명확하고 간결하게 표현할 수 있도록 지원한다. 예를 들어, 기존에는 여러 문자 범위를 복잡한 문자 클래스나 여러 개의 범위 표현으로 처리했다면, /v 플래그와 함께라면 더욱 직관적인 문법으로 표현할 수 있다
  • 최신 유니코드 데이터 반영
    /v 플래그를 활성화하면, 정규 펴현식 엔진은 최신 유니코드 표준의 규칙을 적용하여 패턴을 해석한다. 이로 인해 국제화(i18n)나 다국어 텍스트 처리가 필요한 경우, 보다 정확한 매칭 결과를 얻을 수 있다.
  • 일부 하위 호환성 차이
    /v 플래그는 /u 플래그와 유사한 기본 동작을 유지하면서도, 일부 상황에서 해석 방식이 달라질 수 있다. 기존의 /u 플래그 기반 정규식이 /v 플래그로 변경될 경우 결과가 달라질 수 있으므로, 기존 코드와의 혼환성을 고려해 신중하게 도입해야 한다.

4.3 /v 플래그 사용 예제(개념적)

현재 /v 플래그는 제안 단계에 있으므로, 실제 구현 및 사용 예제는 엔진별로 다를 수 있다.

// /v 플래그를 사용한 정규식 (예제)
// 이 예제는 /v 플래그가 활성화된 상태에서 A-Z 문자만 매칭하는 간단한 패턴을 보여줍니다.
const regex = /[A-Z]/v;

console.log(regex.test("HELLO")); // true: 모두 대문자이므로 매칭됨
console.log(regex.test("Hello")); // false: 소문자 H는 매칭되지 않음

참고: 위 예제는 단순 비교용이며, /v 플래그가 제공하는 진정한 힘은 복잡한 유니코드 집합, 속성 및 범위 표현 등에서 발휘된다. 예를 들어, /v 플래그를 사용하면 Unicode 집합을 보다 간결하게 작성하거나, 기존 /u 플래그로는 처리하기 어려운 패턴 매칭을 구현할 수 있다.

 

다만, 아직 일부 환경에서 실험적으로 지원되거나 제안 단계에 있으므로, 사용 전 대상 엔진의 지원 여부와동작 방식을 확인하는 것이 필요하다.

반응형