프론트엔드 개발을 배우다 보면 JavaScript, CoffeeScript, TypeScript, ES5, ES6 같은 용어를 자주 접하게 됩니다. 이름은 비슷하지만 각각의 역할과 관계가 달라 처음에는 혼란스러울 수 있습니다. 이 글에서는 이들이 서로 어떤 관계에 있는지 하나씩 정리해 드립니다.
JavaScript — 모든 것의 기반이 되는 언어
JavaScript는 이 모든 기술의 출발점이 되는 프로그래밍 언어입니다. 웹 브라우저에서 동작하는 대표적인 스크립트 언어로, 나머지 기술들은 모두 JavaScript를 중심으로 만들어졌습니다.
ES5와 ES6는 별개의 언어가 아니라, 바로 이 JavaScript의 서로 다른 버전을 가리키는 용어입니다.
CoffeeScript — JavaScript로 변환되는 언어
CoffeeScript는 자바스크립트로 트랜스컴파일(transcompile)되는 프로그래밍 언어입니다. 개발자가 CoffeeScript 문법으로 코드를 작성하면, 컴파일러가 이를 실행 가능한 JavaScript 코드로 변환해 줍니다.
쉽게 말해 CoffeeScript는 JavaScript 위에 얹힌 컴파일러 계층이라고 할 수 있습니다. 더 간결하고 읽기 쉬운 문법을 제공해 한때 큰 인기를 끌었지만, ES6에서 CoffeeScript의 장점들이 상당 부분 표준으로 흡수되면서 사용 빈도는 줄어든 편입니다.
TypeScript — JavaScript의 상위 집합(Superset)
TypeScript 역시 자바스크립트로 컴파일되는 언어입니다. TypeScript 문법으로 코드를 작성하면, 컴파일러(tsc)가 이를 순수한 JavaScript 코드로 변환합니다.
TypeScript의 가장 큰 특징은 JavaScript의 상위 집합(superset)이라는 점입니다. 기존 JavaScript 코드를 그대로 사용할 수 있으면서, 여기에 정적 타입(static typing), 인터페이스, 제네릭 같은 기능을 추가한 것이죠. 덕분에 대규모 프로젝트에서 코드 안정성과 유지보수성을 크게 높일 수 있어, 현재 가장 널리 쓰이는 선택지 중 하나입니다.
ES5와 ES6 — JavaScript의 세대 구분
ES5(ECMAScript 5)는 2009년에 확정된 자바스크립트 표준으로, 오랫동안 거의 모든 브라우저에서 지원되는 사실상의 표준 버전이었습니다.
ES6(ECMAScript 2015)는 그다음 세대의 자바스크립트로, let/const, 화살표 함수(arrow function), 클래스(class), 모듈(module), 프로미스(Promise) 등 현대적인 기능이 대거 도입된 버전입니다. 흔히 '차세대 자바스크립트'라고 불립니다.
CoffeeScript와 TypeScript는 ES6의 새로운 기능들을 활용할 수 있는 언어들입니다. 두 언어로 작성된 코드는 컴파일 과정을 거쳐 최종적으로 ES5 수준의 JavaScript로 변환됩니다. 이렇게 하면 아직 ES6를 완전히 지원하지 않는 구형 브라우저에서도 최신 문법의 코드를 실행할 수 있습니다.
정리: 전체 관계 요약
- JavaScript : 모든 것의 기반이 되는 언어
- ES5 / ES6 : JavaScript의 버전(세대) 구분 — ES6는 차세대 자바스크립트
- CoffeeScript : JavaScript로 트랜스컴파일되는 언어 (컴파일러 계층)
- TypeScript : JavaScript의 상위 집합으로, 컴파일 결과물이 JavaScript인 언어
- CoffeeScript와 TypeScript는 ES6 기능을 지원하며, 컴파일 결과물은 ES5 JavaScript
결국 모든 길은 JavaScript로 통합니다. CoffeeScript나 TypeScript로 코드를 작성하더라도, 브라우저가 실제로 실행하는 것은 컴파일된 JavaScript라는 점이 이 관계의 핵심입니다.