JavaScript ES2026 새 기능 정리

Pipeline Operator — 함수 체이닝을 선형으로

Pipeline Operator — 기존 방식 vs |> 방식 비교
// 기존: 중첩 함수 호출 — 안에서 밖으로 읽어야 함
const result = formatOutput(filterActive(normalizeData(parseInput(rawData))));

// Pipeline Operator (Hack Pipeline, Babel 플러그인 필요)
const result = rawData
  |> parseInput(%)
  |> normalizeData(%)
  |> filterActive(%)
  |> formatOutput(%);

// 비동기 파이프라인도 자연스럽게 표현 가능
const user = userId
  |> await fetchUser(%)
  |> await fetchPermissions(%)
  |> formatUserDisplay(%);

// Babel 설정 (proposal-pipeline-operator)
// babel.config.json
// { "plugins": [["@babel/plugin-proposal-pipeline-operator",
//    { "proposal": "hack", "topicToken": "%" }]] }

Temporal API — Date를 대체하는 날짜/시간 처리

Temporal API 주요 예시
// PlainDate — 시간 없이 날짜만
const today = Temporal.Now.plainDateISO();
const nextWeek = today.add({ days: 7 });
console.log(nextWeek.toString()); // 2026-03-22

// ZonedDateTime — 타임존 포함
const meeting = Temporal.ZonedDateTime.from({
  timeZone: 'Asia/Seoul',
  year: 2026, month: 3, day: 20,
  hour: 14, minute: 0
});

// 다른 타임존으로 변환
const nyTime = meeting.withTimeZone('America/New_York');
console.log(nyTime.toString());

// 날짜 차이 계산
const start = Temporal.PlainDate.from('2026-01-01');
const end = Temporal.PlainDate.from('2026-12-31');
const diff = start.until(end);
console.log(diff.days); // 364

// Polyfill 사용 (현재)
// npm install @js-temporal/polyfill
import { Temporal } from '@js-temporal/polyfill';

Record and Tuple — 불변 자료구조

Record and Tuple 사용 예시
// Record — 불변 객체 리터럴
const point = #{ x: 1, y: 2 };
const point2 = #{ x: 1, y: 2 };
console.log(point === point2); // true (값 비교)

// Tuple — 불변 배열
const colors = #['red', 'green', 'blue'];
const colors2 = #['red', 'green', 'blue'];
console.log(colors === colors2); // true

// 수정 시 새 Record/Tuple 반환
const moved = #{ ...point, x: 5 };
console.log(point.x); // 1 (원본 불변)
console.log(moved.x);  // 5

// Map 키로 사용 가능 (참조가 아닌 값 기반)
const cache = new Map();
cache.set(#{ userId: 1, role: 'admin' }, 'data');
console.log(cache.get(#{ userId: 1, role: 'admin' })); // 'data'

새 Array 메서드 — 이미 Stage 4 완료

새 Array/Iterator 메서드 예시
// Array.fromAsync — 비동기 이터러블 → 배열
async function* generate() {
  yield 1; yield 2; yield 3;
}
const arr = await Array.fromAsync(generate()); // [1, 2, 3]

// Iterator Helpers — 지연 평가, 중간 배열 없음
const result = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  .values()
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .take(3)
  .toArray(); // [4, 16, 36]

// Object.groupBy
const people = [
  { name: 'Alice', dept: 'eng' },
  { name: 'Bob', dept: 'design' },
  { name: 'Carol', dept: 'eng' }
];
const byDept = Object.groupBy(people, p => p.dept);
// { eng: [Alice, Carol], design: [Bob] }

// Array.prototype.toSorted / toReversed / toSpliced — 원본 불변
const nums = [3, 1, 2];
const sorted = nums.toSorted(); // [1, 2, 3]
console.log(nums); // [3, 1, 2] — 원본 유지

Pattern Matching — switch를 대체하는 구조적 매칭

Pattern Matching 문법 예시 (실험적)
// 현재 switch로 작성하는 복잡한 분기
function handleResponse(response) {
  switch (true) {
    case response.status === 200 && response.data !== null:
      return processData(response.data);
    case response.status === 404:
      return notFound();
    case response.status >= 500:
      return serverError(response.status);
    default:
      return unknownError();
  }
}

// Pattern Matching으로 표현 (제안 문법)
function handleResponse(response) {
  return match (response) {
    when ({ status: 200, data: not null }) => processData(response.data),
    when ({ status: 404 }) => notFound(),
    when ({ status: (s) if s >= 500 }) => serverError(s),
    default => unknownError()
  };
}

브라우저·Node.js 지원 현황 요약