Question

tsconfig.json 에서 module, target 에 ESNext, ES6 값이 있는데, 차이점이 무엇인가요?

Answer 1

ESNext와 ES6(ES2015)는 자바스크립트의 버전 및 기능 지원과 관련된 용어입니다. 이 둘의 차이점은 자바스크립트의 최신 기능을 얼마나 지원하느냐에 있습니다.

1. ES6 (ES2015)

• 설명: ES6(ECMAScript 2015)는 자바스크립트의 주요 업데이트 중 하나로, 2015년에 공식적으로 발표되었습니다. 이전에 비해 많은 새로운 기능들이 추가되었습니다.

• 주요 기능:

  • let과 const 키워드
  • 화살표 함수 (=>)
  • 클래스 (class)
  • 모듈 시스템 (import/export)
  • 템플릿 리터럴
  • 비동기 프로그래밍을 위한 Promise
  • Map, Set, WeakMap, WeakSet 컬렉션
  • 디스트럭처링 할당
  • for...of 루프
  • 심볼 타입 (Symbol)

• 모듈 시스템: ES6부터 공식적으로 모듈 시스템(ESM)을 도입했으며, 이를 통해 import/export 구문을 사용할 수 있습니다.

2. ESNext

• 설명: ESNext는 특정 버전이 아닌, 자바스크립트의 최신 기능을 의미합니다. JavaScript는 매년 새로운 ECMAScript 표준이 발표되며, ESNext는 이러한 차세대 기능들을 가리킵니다. 즉, 현재 발표되지 않은 미래의 ECMAScript 표준 기능을 포함할 수 있습니다.
• 주요 기능:
  • ES2016 이후 발표된 모든 기능이 포함됩니다.
  • 예: async/await (ES2017), 선택적 체이닝(Optional Chaining), 널 병합 연산자(Nullish Coalescing) (ES2020), BigInt (ES2020), 논리 할당 연산자(ES2021) 등.
  • 아직 제안된 기능들도 포함될 수 있습니다. 예를 들어, 정식 ECMAScript 표준에 들어가지는 않았지만, 현재 TC39에서 논의 중인 실험적 기능들.

차이점 정리

구분	ES6 (ES2015)	ESNext
정의	2015년에 발표된 자바스크립트의 특정 버전	최신의 자바스크립트 기능 및 제안된 기능들
기능	클래스, let, const, Promise, 모듈 등	async/await, 선택적 체이닝, BigInt 등
모듈 시스템	ES 모듈(import/export) 도입	ES 모듈 시스템과 더 많은 최신 기능 지원
변경 주기	고정된 버전	계속해서 업데이트되고 변화함

어떤 것을 선택할까요?

• ES6: 안정적이고 대부분의 최신 브라우저와 Node.js 환경에서 널리 지원됩니다.
• ESNext: 최신 기능을 사용하고 싶고, 트랜스파일러(Babel, TypeScript 등)를 통해 호환성을 유지하면서 미래의 기능을 미리 사용하고 싶다면 선택할 수 있습니다.

TypeScript에서 ESNext를 선택하면 향후 추가될 자바스크립트 기능도 사용 가능하지만, 브라우저나 실행 환경에 따라 폴리필이 필요할 수 있습니다.