JS & TS

Javascript ES16(ECMAScript 2025) 문법정리

Kir93 2025. 7. 9. 16:32
728x90
반응형

ES2024에 대해 정리한 게 얼마 전 같은데 벌써 ES2025에 대한 글을 작성하고 있네요.

이번 업데이트는 개인적으로 JS 개발자들이 자주 겪던 불편함을 개선하는데 초점을 맞춘 업데이트라고 느끼고 있습니다.

특히 정규 표현식 업데이트들은 개인적으로 정말 유용하게 사용할 수 있을 것 같습니다.

1. JSON 모듈 및 Import Attributes

이제 ES2025에서는 JSON 파일을 자바스크립트에서 직접 모듈 형태로 불러올 수 있습니다.

Import Attributes를 통해 파일의 타입을 명시적으로 지정할 수 있습니다.

이전에도 사용할 수 있지 않았나 하시는 분들은 Webpack이나 Vite 등의 번들러를 통해 제공된 기능을 이용한 것이고, 실제 Node, 브라우저 환경에서 정식 지원은 이번에 추가되었습니다.

// 이전 CommonJS 방식
const settings = require('./settings.json');

// ES2025
import settings from "./settings.json" with { type: "json" };
console.log(settings.apiEndpoint);

// 동적 import
const config = await import("./config.json", { with: { type: "json" } });
console.log(config.default);

지원 환경

  • Node.js 22+
  • Chrome/Edge 123+
  • Firefox 138+
  • Safari 17.2+

2. Iterator Helper Methods (이터레이터 헬퍼)

이터레이터에 map, filter, take, drop, flatMap 등 배열의 메서드와 유사한 메서드를 추가하여 lazy 처리로 효율적인 체이닝 처리를 제공해 대량 데이터 처리 시 효율을 향상됩니다.

// 이전
const products = Array.from(fetchProducts())
  .filter(product => product.price > 100)
  .map(product => ({ ...product, price: product.price * 0.9 }));

// ES2025
const products = fetchProducts(); // Assume fetchProducts() returns an iterable
const discountedProducts = products
  .filter(product => product.price > 100)
  .map(product => ({ ...product, price: product.price * 0.9 }))
  .toArray();

지원 환경

  • Node.js 22+
  • Chrome/Edge 125+
  • Firefox 134+
  • Safari 18.4+

3. Set 객체 신규 메서드

Set 객체에 수학적 집합 연산 메서드가 추가되어 합집합, 교집합, 차집합, 대칭차 등의 연산을 간단하게 수행할 수 있습니다.

const adminUsers = new Set(['alice', 'bob']);
const activeUsers = new Set(['bob', 'charlie']);

// 이전
const intersection = new Set([...adminUsers].filter(user => activeUsers.has(user)));

// ES2025
const intersection = adminUsers.intersection(activeUsers);

지원 환경

  • Node.js 22+
  • Chrome/Edge 110+
  • Firefox, Safari 최신 버전 지원

4. RegExp.escape() 메서드

사용자 입력 등 동적으로 정규식을 생성할 때 문자열 내 특수문자를 자동 이스케이프 처리해 주는 메서드입니다.

직접 수작업으로 \를 넣는 복잡함을 해소하고, 누락되는 경계들을 줄여주는 효과가 있습니다.

// 이전
const escapedInput = userInput.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const safePattern = new RegExp(escapedInput);

// ES2025
const userInput = "(special)*.?";
const safePattern = new RegExp(RegExp.escape(userInput));

지원 환경

  • Node.js 24+
  • Chrome/Edge 136+
  • Firefox 134+
  • Safari 18.2+

5. 정규식 부분 플래그 (Pattern Modifiers)

정규표현식의 i(대소문자 무시), m(다중행), s(닷 all) 플래그를 패턴의 일부에만 적용할 수 있게 되었습니다.

새로운 Modifier 문법 (?flags:pattern)을 사용하여 괄호 안 부분패턴에만 특정 플래그들을 켜거나 끌 수 있습니다.

복잡한 정규식에서 일부 섹션만 대소문자 무시 등의 처리가 필요할 때 유용합니다.

// 이전 - 아래와 패턴을 분할 처리하는 등 불편했음.
// 
function createSKURegex(sku) {
  return new RegExp(`^product-${sku}$`, "i"); // 대소문자 무시
}

const result = createSKURegex("SKU123").test("product-sku123"); // true


// ES2025
const regex = /^product-(?i:SKU\d{3})$/;
console.log(regex.test("product-sku123")); // true
console.log(regex.test("product-SKU456")); // true
console.log(regex.test("Product-sku789")); // false

지원 환경

  • Chrome/Edge 125+
  • Firefox 최신 버전 지원
  • Safari 미지원

6. 중복 이름 캡처 그룹 허용

서로 다른 대안(alternative) 내에서 동일한 이름의 캡처 그룹을 선언할 수 있어 가독성이 좋아집니다.

// 이전 - 캡쳐 그룹의 이름 중복 불가능.

// ES2025
const regex = /(?<value>\d+)|(?<value>[a-z]+)/v;
console.log(regex.exec("123").groups.value); // "123"
console.log(regex.exec("abc").groups.value); // "abc"

지원 환경

  • Chrome/Edge 최신 버전 지원
  • Safari 미지원 (정규식 v 플래그 필수)

7. Promise.try() 추가

동기 함수 및 예외 발생 가능성이 있는 로직을 Promise로 간단히 감싸서 처리할 수 있습니다.

기존에 Promise.resolve().then(func) 패턴이나 서드파티 p-try 등을 사용하던 것을 대체하여 간결한 에러 처리 흐름을 제공합니다.

// 이전
async function getUserData() {
  try {
    const userId = getCurrentUserId();
    return await fetchUser(userId);
  } catch (e) {
    return Promise.reject(e);
  }
}

// ES2025
async function getUserData() {
  return Promise.try(() => {
    const userId = getCurrentUserId();
    return fetchUser(userId); // returns Promise
  });
}

지원 환경

  • Node.js 24+
  • Chrome/Edge 128+
  • Firefox 134+
  • Safari 18.2+

8. Float16 (16비트 부동소수점) 지원

메모리 효율성을 위한 Float16 지원이 추가되어 머신러닝이나 그래픽 처리와 같은 영역에서 유용하게 사용할 수 있습니다.

기존 Float32Array를 사용하여 높은 메모리 사용량이 필요했던 부분이 개선되었습니다.

// ES2025
const buffer = new ArrayBuffer(2);
const view = new DataView(buffer);
view.setFloat16(0, 9.87);

console.log(view.getFloat16(0)); // 약 9.8671875 (반올림 발생)

지원 환경

  • Node.js 24+
  • Chrome/Edge 135+
  • Firefox 129+
  • Safari 18.2+
반응형
저작자표시 (새창열림)