3종류의 자바스크립트
자바스크립트 생태계를 이해하기 위해서는 크게 세 가지 분류를 알아야 합니다.
- ES5 (ECMAScript 5): 웹 브라우저에서 동작하는 표준 자바스크립트입니다.
- ESNext: 2015년(ES6) 이후 매년 새롭게 발표되는 자바스크립트의 새로운 버전을 통칭합니다.
- TypeScript: ESNext에 Type(타입) 기능을 추가한 언어입니다.
타입 기능이 있으면 좋은 이유
타입스크립트를 사용하는 가장 큰 이유는 오류의 원인을 사전에 파악하고 더 쉽게 찾기 위해서입니다.
makeName 함수 예제
아래 자바스크립트 코드의 문제점은 무엇일까요? 개발자는 makeName() 함수의 첫 번째 매개변수로 name(문자열), 두 번째 매개변수로 age(숫자)를 의도했습니다. 하지만 호출 시 순서를 바꿔 넣더라도 자바스크립트는 이를 즉시 에러로 잡아내지 못합니다.
1
2
3
4
function makeName(name, age) {}
// 실수로 인자의 순서를 바꿔서 호출한 경우
makeName(32, "오윤희");
이러한 실수는 간단해 보이지만, 코드가 복잡해질수록 원인을 찾는 데 오랜 시간이 걸릴 수 있습니다.
타입스크립트 적용 후
하지만 타입스크립트의 타입 시스템을 활용하면 이러한 실수를 코드를 작성하는 단계에서 바로 잡아낼 수 있습니다.
1
2
3
4
function makeName(name: string, age: number) {}
// 에러 발생: 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다.
makeName(32, "오윤희");
아래 이미지처럼 코드를 실행(런타임)하기도 전에, 작성 단계(컴파일 타임)에서 에러 부분에 빨간 줄이 표시됩니다. 이는 작성자가 의도한 Type과 일치하지 않기 때문입니다.
타입스크립트 코드의 실행 과정
브라우저는 타입스크립트를 직접 이해할 수 없습니다. 따라서 타입스크립트 소스코드는 TSC(TypeScript Compiler)라는 도구를 통해 브라우저가 이해할 수 있는 ES5 자바스크립트 코드로 변환됩니다.
- 트랜스파일러(Transpiler): 특정 프로그래밍 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어의 소스 코드로 변환해 주는 프로그램입니다. (예: TS -> JS)
마치며
혹시 잘못된 정보나 궁금하신 점이 있다면 편하게 댓글 달아주세요. 지적이나 피드백은 언제나 환영입니다.