JavaScript ES2025 주요 기능 정리

JavaScript의 최신 표준인 ES2025에서 추가된 주요 기능을 정리합니다.

1. Iterator Helpers

기존 방식

기존에는 Map.keys(), Set.values(), 제너레이터 같은 이터레이터에 map, filter 같은 배열 메서드를 바로 사용할 수 없었습니다.

그래서 보통 Array.from()으로 배열로 변환한 뒤 처리해야 했습니다.

const numbers = function*() {
  yield* [1, 2, 3, 4, 5];
}();

const evenSquares = Array.from(numbers)
  .filter(n => n % 2 === 0)
  .map(n => n * n);

console.log(evenSquares); // [4, 16]

ES2025 방식

ES2025에서는 이터레이터에 map, filter, take, drop, toArray 같은 메서드를 직접 사용할 수 있습니다.

• map(): 각 요소를 변환합니다.

• filter(): 조건에 맞는 요소만 남깁니다.

• take(n): 앞에서부터 최대 n개 요소를 가져옵니다.

• drop(n): 앞에서부터 n개를 건너뜁니다.

• toArray(): 이터레이터 결과를 배열로 변환합니다.

// map
const numbers = function*() {
  yield* [1, 2, 3];
}();

const doubled = numbers.map(n => n * 2);

console.log(doubled.toArray()); // [2, 4, 6]

// filter
const numbers = function*() {
  yield* [1, 2, 3, 4, 5];
}();

const evens = numbers.filter(n => n % 2 === 0);

console.log(evens.toArray()); // [2, 4]

// take
function* naturals() {
  let i = 1;

  while (true) {
    yield i++;
  }
}

const firstFive = naturals().take(5);

console.log(firstFive.toArray()); // [1, 2, 3, 4, 5]

// drop
const numbers = function*() {
  yield* [10, 20, 30, 40, 50];
}();

const skipped = numbers.drop(2);

console.log(skipped.toArray()); // [30, 40, 50]

// toArray
const numbers = function*() {
  yield* [1, 2, 3, 4, 5];
}();

const result = numbers
  .filter(n => n > 2)
  .map(n => n * 10)
  .toArray();

console.log(result); // [30, 40, 50]

2. Set 메서드 확장

기존 방식

기존에는 합집합, 교집합, 차집합 같은 집합 연산을 직접 구현해야 했습니다.

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

const intersection = new Set([...setA].filter(x => setB.has(x)));

console.log(intersection); // Set { 3, 4 }

ES2025 방식

ES2025에서는 Set 객체에 집합 연산 메서드가 추가되었습니다.

• union(): 합집합

• intersection(): 교집합

• difference(): 차집합

• symmetricDifference(): 대칭차집합

const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

console.log(setA.intersection(setB));        // Set { 3, 4 }
console.log(setA.union(setB));               // Set { 1, 2, 3, 4, 5, 6 }
console.log(setA.difference(setB));          // Set { 1, 2 }
console.log(setA.symmetricDifference(setB)); // Set { 1, 2, 5, 6 }

3. 정규표현식 개선

3-1. 특수 문자열 자동 이스케이프

기존에는 사용자 입력값을 정규표현식으로 사용할 때 특수문자를 직접 이스케이프해야 했습니다.

// 기존
const term = 'item(s) v1.0';

const escaped = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(escaped);

console.log(regex.test('item(s) v1.0')); // true

ES2025에서는 RegExp.escape()를 사용해 문자열을 안전하게 정규식 패턴으로 변환할 수 있습니다.

// ES2025
const term = 'item(s) v1.0';

const regex = new RegExp(RegExp.escape(term));

console.log(regex.test('item(s) v1.0')); // true

3-2. 패턴 내 인라인 플래그

기존에는 i, m, s 같은 플래그가 정규식 전체에만 적용되었습니다.

// 기존
const re = /(ECMA|Ecma|ecma|eCMA)Script/;

console.log(re.test('ecmaScript')); // true
console.log(re.test('ECMAScript')); // true
console.log(re.test('ecmascript')); // false

ES2025에서는 일부 패턴에만 플래그를 적용할 수 있습니다.

// ES2025
const re = /(?i:ECMA)Script/;

console.log(re.test('ECMAScript')); // true
console.log(re.test('ecmaScript')); // true
console.log(re.test('ecmascript')); // false

3-3. 중복된 이름 캡처 그룹

기존에는 같은 정규표현식 안에서 동일한 이름의 캡처 그룹을 중복해서 사용할 수 없었습니다.

// 기존
const regex = /^(?<emailUser>[a-z]+)@example\.com|(?<textUser>[a-z]+) is my username/;

const match1 = 'alice@example.com'.match(regex);

console.log(match1.groups.emailUser); // 'alice'
console.log(match1.groups.textUser);  // undefined

const match2 = 'bob is my username'.match(regex);

console.log(match2.groups.emailUser); // undefined
console.log(match2.groups.textUser);  // 'bob'

ES2025에서는 서로 다른 OR 분기에서 동일한 이름의 캡처 그룹을 사용할 수 있습니다.

// ES2025
const re = /^(?<user>[a-z0-9]+)@example\.com|(?<user>[a-z0-9]+) is my username/;

console.log('test@example.com'.match(re).groups.user); // 'test'
console.log('johndoe is my username'.match(re).groups.user); // 'johndoe'

4. JSON 모듈 import

기존 방식

기존에는 JSON 파일을 읽기 위해 번들러의 JSON 처리 기능을 사용하거나, Node.js의 fs 모듈로 파일을 읽은 뒤 JSON.parse()를 사용했습니다.

import fs from 'fs';

const config = JSON.parse(fs.readFileSync('./config.json', 'utf-8'));

ES2025 방식

ES2025에서는 모듈 시스템에서 JSON 파일을 직접 import할 수 있습니다.

// config.json
// { "appName": "My App", "version": "2.0.0" }

import config from './config.json' with { type: 'json' };

console.log(config.appName); // 'My App'

5. Promise.try()

기존 방식

동기 코드와 비동기 코드를 함께 다룰 때는 try...catch와 Promise.resolve()를 함께 사용해야 해서 코드가 복잡해질 수 있었습니다.

try {
  const result = mayThrow();

  Promise.resolve(result).then(console.log);
} catch (e) {
  console.error(e);
}

ES2025 방식

Promise.try()를 사용하면 동기 예외와 비동기 실패를 Promise 체인에서 일관되게 처리할 수 있습니다.

Promise.try(() => {
  if (Math.random() > 0.5) {
    throw new Error('fail');
  }

  return 'ok';
})
  .then(console.log)
  .catch(console.error);

6. 기타 주요 기능

Float16Array

ES2025에서는 데이터 처리 성능 향상과 메모리 절약을 위해 16비트 부동소수점 타입을 다룰 수 있는 기능이 추가되었습니다.

• Math.f16round(): 값을 float16으로 반올림합니다.

• Float16Array: 16비트 부동소수점 값을 저장하는 TypedArray입니다.

• DataView.getFloat16(): DataView에서 float16 값을 읽습니다.

• DataView.setFloat16(): DataView에 float16 값을 씁니다.

const value = Math.f16round(1.337);

const buffer = new ArrayBuffer(4);
const view = new DataView(buffer);

view.setFloat16(0, value);

console.log(view.getFloat16(0));

정리

ES2025는 JavaScript의 사용성을 높이는 여러 기능을 추가했습니다.

• 이터레이터를 배열처럼 다룰 수 있는 Iterator Helpers

• 집합 연산을 더 쉽게 만드는 Set 메서드

• 더 안전하고 유연해진 정규표현식 기능

• JSON 모듈 import

• 동기/비동기 처리를 단순화하는 Promise.try()

• 16비트 부동소수점 처리를 위한 Float16Array