[Front-end] - JavaScript와 TypeScript 비교

JavaScript와 TypeScript

자바스크립트와 타입스크립트는 둘 다 웹 개발 시 널리 사용되는 프로그래밍 언어이다.

(보통 자바스크립트로 웹개발에 입문 하나 후 타입스크립트를 배우는 경우가 많다고 한다.)

오늘은 자바스크립트와 타입스크립트의 차이점에 대해 설명해보도록 하겠다. JavaScript와 TypeScript 중 어떤 언어를 사용해야 할지 고민하는 사람들에게 도움이 되길 바란다.

자바스크립트(JavaScript)

자바스크립트는 동적이고 유연한 언어이지만, 타입(자료형)이 정해져 있지 않아 오류가 발생하기 쉽다는 단점이 있다.

타입스크립트(TypeScript)

타입스크립트는 자바스크립트를 기반으로 한 언어로, 2012년 Microsoft에서 개발한 언어이다. 자바스크립트의 단점을 보완하기 위해 등장한 언어이다.

JavaScript와 TypeScript 차이점 정리

	JavaScript	TypeScript
타입 지정	동적(dynamic) 타입 (실행 중 타입이 결정됨)	정적(static) 타입 (컴파일 시 타입 검사)
오류 검출	실행 중 오류 발견	컴파일 단계에서 오류 발견
확장성	타입 검사가 없어서 코드가 자유로운 편	대규모 프로젝트 시 유지보수 용이
실행 환경	브라우저, Node.js 등에서 바로 실행 가능	컴파일 후 자바스크립트로 변환 필요

타입 지정

JavaScript

자바스크립트는 동적이고 유연한 언어이지만, 타입(자료형)이 정해져 있지 않아 오류가 발생하기 쉽다는 단점이 있다.

아래 예시를 보자.

function add(a, b) {
    return a + b;
}

console.log(add(10, 20));  // 30 출력
console.log(add(10, "20")); // '1020' 문자열 출력 (문자열 결합 발생)

위 JavaScript 코드에서, add 함수는 두 개의 숫자를 더하는 함수로 보이지만, 만약 매개변수로 문자열이 들어가게 되면, 숫자 대신 문자열 결합이 발생한다. (즉 숫자 매개변수도 문자열로 변환되어버린다.)

=> 자바스크립트는 동적 타입 언어라서 이런 일이 발생한다.

TypeScript

반면, 타입스크립트는 정적 타입(Static Type)을 지원해준다. 즉, 변수나 함수의 매개변수에 타입을 명시하여 코드의 안정성을 높일 수 있다.

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(10, 20));  // 30이 출력됨
console.log(add(10, "20")); // 오류 발생! 문자열을 넣을 수 없음

위 TypeScript 코드에서 add 함수의 매개변수에 타입이 number로 명시되어 있다.

따라서 add(10, "20")을 실행하면 컴파일러가 오류를 발생시켜 개발자가 실수를 미리 방지할 수 있다.

TypeScript의 장점 (vs JavaScript)

컴파일 단계에서 에러 체크 가능

자바스크립트와 달리 타입스크립트는 타입을 명시한다. 그래서 런타임 단계에서 오류와 에러를 미리 체크할 수 있다. 프로그램이 동작하기 전에 에러를 잡을 수 있는 것이다.

가독성 향상

앞서 본 add() 메서드의 예시처럼, 타입스크립트는 자료형을 명시함으로써 어떤 자료형의 데이터가 필요하고 리턴되는지 코드 상에서 쉽게 확인이 가능하다. 자바스크립트의 경우 타입 명시를 하지 않기 때문에 코드는 짧을 수 있지만, 자료형에 대한 정보가 필요한 경우 한눈에 코드를 읽기가 힘들고 가독성이 타입스크립트에 비해 안좋은 편이다.

자동 완성 지원

타입 명시로 인해 코드의 의미가 더 명확해지며, 이에 따라 IDE에서 코드 자동 완성의 정확도가 더 높다.

대규모 프로젝트에 적합

코드 규모가 커질수록 타입 안정성이 큰 타입스크립트가 유지보수에 더 유리하다.

결론 : JavaScript와 TypeScript 중 뭘 사용할까?

소규모 프로젝트, 개인 토이 프로젝트 등에서는 자바스크립트로도 충분한 경우가 많다. (입문자에게 추천하는 이유)

그러나 프로젝트 규모가 커짐에 따라, 코드가 복잡해진다면, 타입스크립트를 사용하여 유지보수성과 안정성을 높이는 것이 좋다고 한다. 팀 프로젝트에서 타입스크립트를 사용하면 코드의 일관성을 유지하는 데 유용하다.

자바스크립트는 유연하고 빠르게 개발할 수 있는 언어이지만, 타입스크립트는 타입 안정성과 코드 유지보수 측면에서 더 유리하다는 장점이 있다. 따라서 자신이 진행하는 프로젝트의 규모와 필요에 따라서 적절한 언어를 선택하면 되겠다!

개발 고양이