최근 ECMAScript에 새로운 기능이 많이 추가되고 있다.

현재 브라우저에 유용한 기능들이 많이 추가되었고, 이러한 기능들 중 일부는 모든 것을 배열로 변환하지 않고 집합 연산을 수행하거나 라이브러리에 의존하지 않고 데이터를 처리하는 것처럼 오랫동안 부족했던 부분을 채워주는 기능도 추가되었다.

이에 따라 사용할 수 있는 기능부터 출시 예정의 기능들까지 알아보고자 한다.

새로운 집합 메서드 (ES2025)

집합 연산을 위한 union(합집합), intersection(교집합), difference(차집합) 등의 메서드가 추가되어 수학적 집합 계산이 가능하다.

새로운 Set의 집합 방법을 사용하면 코드를 좀 더 깔끔하게 작성할 수 있다.

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

a.union(b); // Set {1, 2, 3, 4, 5, 6}
a.intersection(b); // Set {3, 4}
a.difference(b); // Set {1, 2}
a.symmetricDifference(b); // Set {1, 2, 5, 6}

a.isSubsetOf(b); // false
a.isSupersetOf(b); // false
a.isDisjointFrom(b); // false

새롭게 추가된 메서드들은 원래 집합을 변경하지 않고, 모두 새로운 값을 반환한다.

이와 관련된 자세한 내용은 ECMAScript2025에서 확인할 수 있다.

이터레이터 헬퍼 (ES2025)

제너레이터나 이터레이터에 map, filter, reduce와 같은 배열 메서드를 직접 사용할 수 있게 되어 지연 평가(lazy evaluation)를 활용한 데이터 처리가 수월해졌다.

이터레이터 헬퍼는 내용에 앞서 이해하기 위해서는 제너레이터와 이터레이터의 개념을 알고 있어야 한다.

제너레이터(Generator) 함수가 무엇일까 ?

제너레이터(Generator)는 Iterable이면서 Iterator인 객체의 특별한 종류이다.

function 키워드 뒤에 *가 붙으며 next호출시마다 다음 yield의 expression이 반환된다.

일시정지와 재시작 기능을 여러 반환 포인트들을 통해 사용할 수 있다.

일반 함수	제너레이터 함수
호출하면 즉시 전부 실행	호출해도 바로 실행 안 됨
값 하나 return	`yield`로 값을 하나씩 뱉음
실행 후 종료	중간에 멈췄다가 재개 가능

코드 예시

// 제너레이터 함수 추가
function* numbers() {
  let i = 0;
  while (true) yield i++;
}

// 제너레이터 선언
const gen = numbers();
gen.next() // { value: 0, done: false }
gen.next() // { value: 1, done: false }
gen.next() // { value: 2, done: false }

위 코드에서 확인할 수 있듯이 yield는 함수 실행을 일시정지하고 값을 바깥으로 넘긴다.

.next()를 호출할 때마다 yield지점부터 재개된다.

이터레이터(Iterator)는 무엇인가 ?

next()메서드를 가진 객체를 의미한다. 이 메서드는 순차적으로 원소들을 탐색하며, next 메서드의 호출 시 마다 새로운 객체를 반환한다. 반환되는 객체는 value와 done 프로퍼티를 가지고 있으며, 탐색이 완료될 때 done프로퍼티의 값이 true가 된다.

function numbersManual() {
  let i = 0;
  return {
    next() {
      return {
        value: i++,
        done: false,
      };
    },
  };
}

const iter = numbersManual();
iter.next(); // { value: 0, done: false }
iter.next(); // { value: 1, done: false }

이터레이터(Iterator)의 코드 예시는 위와 같다.

Iterable 이란 ?

Iterable은 Symbol.iterator [Symbol.iterator]()라는 메서드를 가지고있는 객체이다. 이 메서드가 Iterator를 반환한다

// 배열은 Iterable
const arr = [1, 2, 3]
const iter = arr[Symbol.iterator]()
iter.next() // { value: 1, done: false }
iter.next() // { value: 2, done: false }

이제 ES2025에서 추가된 이터레이터 헬퍼를 알아보자.

기존 이터레이터는 next()만 있기에 map, filter와 같은 메서드가 존재하지 않았다.

Array.from(gen()).filter(n => n % 2 === 0)

기존에는 배열로 변환을해야 했지만, 무한 이터레이터면 변환 자체가 불가능한 문제가 있었다.

function* numbers() {
  let i = 0;
  while (true) yield i++;
}

const result = numbers()
  .filter((n) => n % 2 === 0)
  .map((n) => n * n)
  .take(5)
  .toArray();
// [0, 4, 16, 36, 64]

ES2025부터는 이터레이터 객체에 메서드가 생겼고, 위와 같이 코드를 작성할 수 있다.

배열의 map/filter와 차이가 있으며, 위에서 이야기한 지연 평가(lazy evaluation)이다.

배열은 filter → 전체 순회 → 새 배열 생성 → map → 새 배열 생성 이와 같은 방식으로 동작하지만,

이터레이터는 값 하나를 꺼낼 때마다 filter → map → take 순으로 통과한다.

i=0 → filter ✅ → map(0)  → take 1번째
i=1 → filter ❌ → skip
i=2 → filter ✅ → map(4)  → take 2번째
i=4 → filter ✅ → map(16) → take 3번째
...
take 5번째 도달 → 즉시 종료 (i=8까지만 실행됨)

이로 인하여 무한 이터레이터를 다룰 수 있게되고, 중간에 take로 끊으면 이후는 동작하지 않도록 가능하다.

Promise.try (ES2025)

오류를 발생시키거나 거부된 Promise를 반환할 수 있는 함수가 있는 경우, 일반적으로 블록을 감싸서 처리해야 했다.

somePromise.then(() => functionThatMightThrowSync())

Exception은 거부된 Promise만 처리하고 동기식 예외는 처리하지 않기 때문이다.

Promise.try 기능은 동기 오류를 거부로 변환하여 두 가지 경우를 하나의 콜백으로 처리할 수 있도록 하여 이런 문제를 해결할 수 있다.

Promise.try(() => {
  if (!userId) throw new Error("No user ID") // sync throw
  return fetch(`/api/users/${userId}`).then(r => r.json()) // async rejection
})
  .then(user => console.log(user))
  .catch(err => console.error(err)) // handles both cases

전달하는 모든 함수의 Promise.try동기 예외는 거부 예외로 변환되므로 .catch()오류를 발생 위치와 관계없이 항상 실행된다. 지금은 모든 브라우저의 기본으로 쓰이고 있다.

가져오기 속성 (ES2025)

이전에 자바스크립트는 JSON 파일을 가져오는 것이 지원되지 않아서 Vite와 같은 번들러가 필요했다.

하지만 Import Attributes가 도입되면서 자바스크립트가 아닌 리소스를 직접 가져올 수 있게 되었다.

import config from "./config.json" with { type: "json" }
console.log(config.version)

const data = await import("./data.json", { with: { type: "json" } })

with { type: “json” }부분은 브라우저에게 해당 모듈의 종류를 알려주는 것이다. 문법적 편의를 위한 것 보다 보안에 대한 조치이며, 이 부분이 없으면 서버가 JSON URL로 자바스크립트 파일을 제공할 수 있고 실행될 수도 있다. 그렇기에 명시적으로 type MIME 유형이 일치하지 않으면 오류가 발생하도록 지정하여 방지하도록 설계되었다.

※ 아직 이 기능은 JSON 파일 형식만 가져올 수 있게 되어있지만, 추후에는 다른 파일도 가져올 수 있도록 추가될 것 같다.

Array.fromAsync (ES2026)

Array.from([1, 2, 3]) // [1, 2, 3]
Array.from("hello") // ['h', 'e', 'l', 'l', 'o']
Array.from({length: 3}, (_, i) => i) // [0, 1, 2]

기존의 Array.from은 동기 Iterable만 받을 수 있었기에 await 을 사용해도 의미가 없었다.

배열, 문자열, 유사 배열 객체처럼 동기적으로 값을 열거할 수 있는 대상만 변환할 수 있었다.

반면 Array.fromAsync는 비동기 Iterable도 배열로 변환할 수 있다.

async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const data = await fetch(`${url}?page=${page}`).then((r) => r.json());
    if (data.items.length === 0) break;
    yield data.items;
    page++;
  }
}

const allItems = await Array.fromAsync(fetchPages("/api/items"));

위 코드처럼 비동기 방식으로 처리할 수 있게 되었다.

Error.isError (ES2026)

어떤 값이 Error 객체인지 확인할 때 instanceof Error를 사용하는 것이 일반적이다. 하지만 때로는 예상과 다르게 동작하여 false를 반환하는 경우가 있다. 각 영역마다 고유한 Error 생성자를 갖고 있고, instanceof는 생성자 객체의 동일성에 의존하기 때문이다.

Error.isError는 이런 문제를 해결할 수 있게된다.

Error.isError(new Error("에러 발생"))       // true
Error.isError(new TypeError("타입 오류"))   // true
Error.isError({ message: "에러처럼 보이는 객체" }) // false
Error.isError("문자열")               // false

⭐ using 키워드를 사용한 명시적 자원 관리 (ES2027)

데이터베이스 연결, 파일 핸들, 이벤트 리스너, 타이머와 같은 객체는 사용 후 정리가 필요하다. 기존에는 이를 try/finally블록을 사용하는 것이 일반적이었는데 관리해야 하는 리소스가 많아질 경우 코드가 금방 복잡해질 수 있다.

이런 문제를 개선하기 위해 using키워드가 나오게 되었으며, using으로 선언한 변수는 해당 변수가 스코프를 벗어날 때 [Symbol.dispose]()를 자동으로 호출하여 리소스를 정리해준다.

class DatabaseConnection {
  connect() {
    /* ... */
  }
  query(sql) {
    /* ... */
  }

  // 스코프를 벗어날 때 자동으로 호출됨
  [Symbol.dispose]() {
    this.close();
    console.log("Connection closed");
  }
}

function runQuery() {
  using conn = new DatabaseConnection();
  conn.connect();
  return conn.query("SELECT * FROM users");
  // conn[Symbol.dispose]()가 여기서 자동으로 호출됨
}

비동기 방식에서는 await using을 사용하며, [Symbol.asyncDispose]()가 호출된다.

async function processFile() {
  await using file = await openFile("data.txt");
  const contents = await file.read();
  return contents;
  // file[Symbol.asyncDispose]()가 여기서 자동으로 await
}

C#의 using과 Python의 with에서 제공하던 기능을 자바스크립트에서도 사용할 수 있게 되었으며, 중첩된 try/finally블록보다 훨씬 간결하게 작성할 수 있게 되었다. 타입스크립트는 지금 사용이 가능하며, 관련 TC39 프로포절은 링크에서 확인할 수 있다.

※ 2026년 5월 기준 브라우저 지원률은 70%정도로 확인되며, Safari에서는 아직 지원되지 않고 있다.

⭐ Temporal (ES2027)

자바스크립트의 기존 Date API는 오랫동안 불편함이 많았고, moment, date-fns와 같은 라이브러리를 별도로 설치해 사용해 왔다. Temporal의 기능들은 라이브러리 설치 없이 대체 가능할 정도이며 날짜, 시간, 시간대, 기간 등 훨씬 많은 범위에서 쉽게 다룰 수 있게 되었고 ECMA-262표준에 병합될 예정이다. TC39 프로포절은 링크에서 확인할 수 있다.

const birthday = Temporal.PlainDate.from("1998-08-12"); // 생년월일을 날짜 객체로 변환
const today = Temporal.Now.plainDateISO(); // 오늘 날짜를 ISO 형식으로 가져옴
const age = birthday.until(today, { largestUnit: "years" }); // 생년월일부터 오늘까지의 기간을 연 단위로 계산

console.log(`${age.years} years old`); // 계산된 나이 출력

※ 2026년 5월 기준 브라우저 지원률은 65% 정도로 확인되며, Safari에서는 아직 지원되지 않고 있다. 다만 공식 폴리필이 제공되고 있어 사용해볼 수 있다.

자바스크립트 최신 ECMAScript 2025-2027