JavaScript vs TypeScript

최근 리액트 공부를 하면서, 자바스크립트와 타입스크립트를 사용해보게 되었는데 기능 구현에만 치중하다 보니 그 본질적인 차이에 대해 알지 못하고 있었다. 오늘은 그 차이에 대해 문법적 효율적 등 다양한 관점의 순서대로 설명해보고자 한다.

 

1. 기원적인 차이

> 자바스크립트

   - Brendan Eich 가 1995년에 넷스케이프 브라우저를 위해 개발한 스크립트 언어로, 초기에는 동적이면서 느슨한 타입의 안어로 설계되었다.

> 타입스크립트

   - 마이크로소프트에서 개발한 언어로, 자바스크립트에 정적 타입을 추가한 언어이다. 타입스크립트는 자바스크립트의 상위 집합이며, 타입스크립트의 코드는 자바스크립트로 변환할 수 있다.

 

2. 문법적인 차이

> 자바스크립트

   - 동적 언어. 변수 선언 시 타입을 명시하지 않는다.

> 타입스크립트

   - 정적 타입 언어. 변수 선언 시 명시적으로 타입을 지정할 수 있다.

 

3. 효율의 차이

> 자바스크립트

   - 런타임에서 동적으로 타입이 결정되기 때문에 실행 전에 타입 오류를 찾을 수 없고, 런타임 오류가 발생할 수 있다.

> 타입스크립트

   - 컴파일 단계에서 타입을 확인하므로 타입 관련 오류를 런타임 이전에 잡을 수 있다. 이는 프로그램의 안정성을 향상시키고 유지보수를 용이하게 한다.

 

4. 프로그램적 차이

> 자바스크립트

   - 객체 기반 프로그래밍 언어로, 프로토 타입 기반의 상속을 지원한다.

> 타입스크립트

   - 클래스 기반의 객체 지향 프로그래밍을 지원하며, ES6 이후의 자바스크립트 문법을 포함한다. 정적 타입 및 인터페이스 등의 고급 타입 기능을 제공한다.

 

5. 용도의 차이

> 자바스크립트

   - 웹 브라우저에서 동작하는 클라이언트 측 스크립팅 언어로 시작했지만, 현재는 서버 측 (Node.js)에서도 사용되고 있다.

> 타입스크립트

   - 대규모 애플리케이션 개발을 위해 설계되었으며, 타입 안정성과 코드 유지보수성을 강화하기 위해 사용된다. Angular와 같은 프레임워크에서 널리 사용된다.

 

타입스크립트는 자바스크립트를 확장하는 형태이므로, 기존의 자바스크립트 코드를 그대로 사용하면서도 타입스크립트의 강력한 정적 타입 기능을 활용할 수 있다.

간단한 함수를 통해 자바스크립트와 타입스크립트의 차이를 예시 들어보겠다.

 

<자바스크립트 예시>

   : 자바스크립트에서는 함수의 매개변수와 반환값에 대한 타입을 명시하지 않는다. 이는 동적 타입 언어로, 런타임에 타입이 결정되기 떄문이다.

// JavaScript에서의 함수
function add(a, b) {
    return a + b;
}

// 함수 호출
console.log(add(5, 10));  // 출력 결과: 15
console.log(add('5', '10'));  // 출력 결과: '510' (문자열 연결)

 

<타입스크립트 예시>

   : 타입스크립트에서는 함수의 매개변수와 반환값에 대한 타입을 명시할 수 있다. 이러한 명시적인 타입 선언은 코드를 작성하는 시점에서 오류를 미연에 방지할 수 있다.

// TypeScript에서의 함수
function add(a: number, b: number): number {
    return a + b;
}

// 함수 호출
console.log(add(5, 10));  // 출력 결과: 15
// 아래 주석을 해제하면 TypeScript 오류 발생 (문자열을 숫자에 더하려고 하기 때문)
// console.log(add('5', '10'));