JavaScript ES2024 신기능 완전 정복

2026년 6월 업데이트

이 글을 ES2025 정식 확정(2025년 6월)과 ES2026 진행 상황에 맞춰 최신화했다. ES2024의 핵심 기능은 이제 모든 주요 브라우저에서 Baseline으로 안정화됐고, ES2025에서 Iterator Helpers, Set 메서드(union·intersection·difference), Array.fromAsync, Promise.try, RegExp.escape가 표준에 합류했다. 또한 오래 기다려온 Temporal이 2026년 3월 Stage 4에 도달해 ES2026에 포함되며 Chrome 144+, Firefox 139+, Edge 144+에서 네이티브로 제공되기 시작했다.

JavaScript ES2024(ES15)가 2024년 6월에 정식 발표된 이후, 매년 6월 새 표준이 확정되는 ECMAScript의 연간 릴리스 흐름은 그대로 이어지고 있다. 2025년 6월에는 ES2025가 확정됐고, 2026년에는 Temporal을 비롯한 기능들이 ES2026으로 들어왔다. 이번 글에서는 ES2024의 검증된 기능부터 최신 ES2025·ES2026 기능까지, 실무에서 곧바로 활용할 수 있는 것들을 순서대로 살펴본다.

toReversed() - 불변성을 지키는 배열 뒤집기

기존의 reverse() 메서드는 원본 배열을 변경했지만, 새로운 toReversed()는 원본을 유지하면서 뒤집힌 새 배열을 반환한다.

JavaScript - toReversed()
// ES2024 - toReversed()
const numbers = [1, 2, 3, 4, 5];
const reversed = numbers.toReversed();
console.log(numbers);  // [1, 2, 3, 4, 5] (원본 유지)
console.log(reversed); // [5, 4, 3, 2, 1]

// 실무 활용
const userList = [
  { name: '김철수', age: 25 },
  { name: '박영희', age: 30 }
];
const reverseOrder = userList.toReversed();

ES2024 신기능 · 이제 Baseline

toReversed(), toSorted(), toSpliced() 등 모든 배열 변경 메서드에 불변성 버전이 추가되어 함수형 프로그래밍이 더 쉬워졌다. 2026년 현재 이 메서드들은 모든 주요 브라우저에서 Baseline으로 안정화되어 폴리필 없이 바로 사용할 수 있다.

Array.with() - 특정 인덱스 값 변경

배열의 특정 인덱스 값을 변경할 때도 불변성을 유지할 수 있다.

JavaScript - with()
const fruits = ['apple', 'banana', 'orange'];
const updated = fruits.with(1, 'grape');
console.log(fruits);  // ['apple', 'banana', 'orange']
console.log(updated); // ['apple', 'grape', 'orange']

// React 상태 업데이트에서 활용
const toggleTodo = (index) => {
  setTodoList(prev =>
    prev.with(index, {
      ...prev[index],
      completed: !prev[index].completed
    })
  );
};

Object.groupBy() - 객체 그룹화의 혁신

배열을 특정 조건으로 그룹화하는 작업이 훨씬 간단해졌다.

JavaScript - Object.groupBy()
const users = [
  { name: '김철수', department: '개발팀', age: 25 },
  { name: '박영희', department: '디자인팀', age: 30 },
  { name: '이민수', department: '개발팀', age: 28 }
];

// ES2024 - 한 줄로 그룹화
const grouped = Object.groupBy(users, u => u.department);
// { '개발팀': [...], '디자인팀': [...] }

// 키를 객체로 쓰고 싶다면 Map.groupBy()
const byTeam = Map.groupBy(users, u => u.department);
// Map(2) { '개발팀' => [...], '디자인팀' => [...] }

키가 문자열이면 Object.groupBy(), 객체나 다른 값을 키로 쓰려면 Map.groupBy()를 사용한다. 두 메서드 모두 2024년부터 Baseline에 포함되어 Node.js 21+, Deno 1.37+, 모든 최신 브라우저에서 동작한다.

Promise.withResolvers()

Promise와 resolve, reject를 분리해서 사용할 수 있는 새로운 패턴이다.

JavaScript - Promise.withResolvers()
// ES2024
const { promise, resolve, reject } = Promise.withResolvers();

// 파일 업로드 등 외부에서 resolve 호출이 필요한 경우 유용
class FileUploader {
  startUpload(fileId, file) {
    const { promise, resolve, reject } = Promise.withResolvers();
    this.uploadPromises.set(fileId, { resolve, reject });
    this.performUpload(fileId, file);
    return promise;
  }
}

String.isWellFormed() - UTF-16 검증

문자열이 올바른 UTF-16 형식인지 검증할 수 있다. API 응답 데이터 검증이나 사용자 입력 유효성 검사에 유용하다.

JavaScript - isWellFormed()
"안녕하세요".isWellFormed(); // true
"\uD800".isWellFormed();     // false (단독 high surrogate)

function validateInput(text) {
  if (!text.isWellFormed()) {
    throw new Error('잘못된 문자 인코딩');
  }
  return text;
}

ES2025 - Iterator Helpers와 Set 메서드

2025년 6월 정식 확정된 ES2025는 ES2024 못지않게 실무 체감도가 높은 기능들을 가져왔다. 그중에서도 Iterator Helpers와 Set 메서드는 별도 라이브러리 없이 일상 코드를 크게 줄여 준다.

Iterator Helpers - 배열로 변환하지 않고 체이닝

이제 모든 이터레이터에서 map(), filter(), take(), drop() 등을 바로 체이닝할 수 있다. 이터레이터는 지연 평가(lazy)되므로, 큰 데이터셋을 배열로 펼치지 않고 필요한 만큼만 처리해 메모리 효율이 좋다.

JavaScript - Iterator Helpers (ES2025)
function* naturals() {
  let n = 1;
  while (true) yield n++;
}

// 무한 시퀀스에서 필요한 만큼만 지연 처리
const result = naturals()
  .map(n => n * n)
  .filter(n => n % 2 === 0)
  .take(5)
  .toArray();
console.log(result); // [4, 16, 36, 64, 100]

Set 메서드 - 집합 연산 내장

오래 기다려온 union, intersection, difference, symmetricDifference가 Set.prototype에 추가됐다. 수학적 집합 연산을 수동 순회나 외부 라이브러리 없이 처리할 수 있다.

JavaScript - Set 메서드 (ES2025)
const admins = new Set(['kim', 'park', 'lee']);
const active = new Set(['park', 'lee', 'choi']);

admins.intersection(active); // Set { 'park', 'lee' }
admins.union(active);        // Set { 'kim', 'park', 'lee', 'choi' }
admins.difference(active);   // Set { 'kim' }

Array.fromAsync · Promise.try · RegExp.escape

비동기 이터러블을 한 번에 배열로 모으는 Array.fromAsync(), 동기 함수의 예외까지 안전하게 Promise로 감싸는 Promise.try(), 정규식에 안전하게 끼워 넣도록 문자열을 이스케이프하는 RegExp.escape()도 ES2025에 함께 들어왔다.

JavaScript - ES2025 유틸리티
// 비동기 이터러블을 한 번에 수집
const lines = await Array.fromAsync(readStream);

// 동기/비동기 예외를 모두 Promise로 통일
Promise.try(() => mayThrow())
  .then(handle)
  .catch(onError);

// 사용자 입력을 정규식에 안전하게 삽입
const safe = RegExp.escape(userInput);
const re = new RegExp(safe, 'g');

실무 활용 팁

Iterator Helpers는 데이터 파이프라인을 배열 생성 없이 구성할 수 있어 대용량 스트림 처리에 특히 유용하다. Set 메서드는 권한 비교, 태그 매칭, 중복 제거 같은 작업을 한 줄로 정리해 준다. 이 밖에 ES2025에는 JSON 모듈 임포트, 정규식의 중복 명명 캡처 그룹, Float16Array 등도 포함됐다.

ES2026 - Temporal과 그다음

JavaScript 날짜·시간 처리의 고질적 문제를 해결할 Temporal이 2026년 3월 TC39 Stage 4에 도달해 ES2026 사양에 포함됐다. 모호한 Date 객체를 대체해 불변(immutable) 객체, 명확한 시간대 처리, 직관적인 산술을 제공한다.

JavaScript - Temporal (ES2026)
// 시간대를 명시한 현재 시각
const now = Temporal.Now.zonedDateTimeISO('Asia/Seoul');

// 불변 객체 - 연산은 항상 새 인스턴스를 반환
const deadline = Temporal.PlainDate.from('2026-06-30');
const remaining = deadline.since(Temporal.Now.plainDateISO());
console.log(remaining.days); // 마감까지 남은 일수

// 날짜 산술이 명확하고 안전
const nextWeek = Temporal.Now.plainDateISO().add({ days: 7 });

브라우저 지원

Temporal은 Chrome 144+, Firefox 139+, Edge 144+에서 네이티브로 제공되기 시작했다. 아직 모든 환경을 커버하지는 않으므로, 폭넓은 지원이 필요하면 공식 폴리필(@js-temporal/polyfill)을 함께 사용하면 된다.

이처럼 ECMAScript는 매년 6월 새 표준을 확정하는 안정적인 연간 릴리스 주기를 유지하고 있다. 거대한 한 번의 변화 대신 작고 실용적인 기능이 꾸준히 추가되므로, 기능별 Baseline 상태만 확인하면 안심하고 점진적으로 도입할 수 있다.

브라우저 지원 현황과 폴리필

2026년 현재 ES2024 기능(toReversed·toSorted·Object.groupBy·Promise.withResolvers·String.isWellFormed)은 모든 주요 브라우저에서 Baseline으로 안정화되어 폴리필 없이 사용할 수 있다. ES2025의 Iterator Helpers와 Set 메서드 역시 최신 Chrome·Firefox·Safari·Node.js에서 폭넓게 지원되며, 구형 환경 호환이 필요할 때만 폴리필을 검토하면 된다. ES2026의 Temporal은 아직 도입 초기이므로 공식 폴리필 병행을 권장한다.

기능	표준	2026년 지원 상태
toReversed / toSorted / with	ES2024	Baseline (전 브라우저)
Object.groupBy / Map.groupBy	ES2024	Baseline (전 브라우저, Node 21+)
Promise.withResolvers	ES2024	Baseline
Iterator Helpers	ES2025	최신 브라우저 지원
Set 메서드 (union 등)	ES2025	최신 브라우저 지원
Array.fromAsync / Promise.try / RegExp.escape	ES2025	최신 브라우저 지원
Temporal	ES2026	Chrome 144+ / Firefox 139+ / Edge 144+ (폴리필 권장)