자원 정리를 더 간결하게: JavaScript의 using 문법 도입

JavaScript에도 드디어 명시적 자원 관리(Explicit Resource Management) 기능이 도입되고 있다.

기존에는 try-finally 블록을 활용해 직접 자원을 해제해야 했지만, 앞으로는 using 키워드와 dispose() 메서드를 통해 더 안전하고 간결하게 자원을 관리할 수 있게 된다.

이 기능은 현재 ECMAScript Stage 3에 도달했으며, V8 엔진 기반 환경(Chrome, Node.js 등)에 우선 적용되고 있다.

기존 방식의 한계

프론트엔드 개발에서 자원을 수동으로 정리해야 하는 경우는 많다.

• IntersectionObserver, MutationObserver
• WebSocket, MediaStream, FileHandle 등

하지만 기존 JavaScript에서는 다음처럼 직접 finally로 정리해야만 했다.

const res = getResource();
try {
  doSomething(res);
} finally {
  res.dispose();
}

이 방식은 코드가 길어지고, 비동기 흐름에서 실수 가능성도 높다.

새로운 방식: using 문법

JavaScript에서도 이제 다음처럼 using을 사용해 자원을 선언하고, 스코프가 끝나면 자동 정리할 수 있다.

using res = getResource();
res.doSomething();

이 방식이 동작하려면 객체에 다음 메서드가 있어야 한다.

class MyResource {
  [Symbol.dispose]() {
    // 자원 해제 로직
  }
}

비동기 자원은 await using + Symbol.asyncDispose로 처리할 수 있다.

활용 예시: MutationObserver 해제 자동화

class DOMObserver {
  constructor() {
    this.observer = new MutationObserver(() => console.log("변경 감지"));
    this.observer.observe(document.body, { childList: true });
  }

  [Symbol.dispose]() {
    this.observer.disconnect();
  }
}

using obs = new DOMObserver();
// DOM 변경 감지 중...
// 스코프 종료 시 observer 자동 해제

기대 효과

• 코드 간결화: try-finally 없이도 명시적인 자원 정리가 가능
• 안정성 향상: 누락 없이 자원 해제 가능
• 프론트엔드 실무 활용성 높음:
  • AbortController, WebSocket, Observer 등 자동 정리에 유리

TI Tech Lab 김준수 연구원

Source

• https://v8.dev/blog/explicit-resource-management
• https://github.com/tc39/proposal-explicit-resource-management