1. JavaScript와 TypeScript
-
TypeScript를 사용하면 JavaScript와 달리 코드 작성 과정에서 코드를 실시간으로 디버깅할 수 있어 매우 편리하다.
-
TypeScript는 컴파일 언어로, 컴파일 과정에서 오류를 잡아내기 때문에 오류를 사전에 찾아내기 쉽다. 반면, 인터프리터 언어인 JavaScript는 컴파일 과정 없이(컴파일 과정이 없기 때문에 에러를 출력하지 않고 실행) 런타임 환경(실제 동작하는 환경)에서 오류를 잡아내기 때문에 사전에 에러를 확인하기 힘들다.
컴파일과 런타임
- 컴파일 : 컴파일러를 통해 프로그래밍 언어를 CPU가 이해할 수 있는 기계어로 변환하는 과정
- 런타임 : 특정 언어로 만든 프로그램을 실행(구동) 할 수 있는 환경, 이러한 런타임 종류로는 웹 브라우저와 node.js가 있다.
2. JavaScript
- JavaScript는 동적 언어(선언할 때 타입 지정 안 함)이며, 컴파일 시가 아닌 런타임 시 변수의 타입이 결정된다.
동적 타이핑(Dynamic Typing)
- 변수의 타입 선언 없이 값이 할당되는 과정에서 동적으로 타입을 추론(Type Inference)한다. 동적 타입 언어는 타입 추론에 의해 변수의 타입이 결정된 후에도 같은 변수에 여러 타입의 값을 교차하여 할당할 수 있다.
- 자바스크립트는 인터프리터 언어로 컴파일 과정 없이 인터프리터가 한 줄씩 해석해서 바로 실행한다.
1) 장점
-
런타임 시 타입이 결정되기 때문에 유연성이 높으며, 타입 유추를 통한 타입 제어가 가능하다.
-
컴파일 시 타입을 명시해 주지 않아도 되기 때문에 개발 속도가 향상된다.
2) 단점
-
런타임 시 타입 자동 변환을 통해 타입 에러를 발생시킬 수 있다.
-
런타임 시 확인할 수밖에 없기 때문에 코드가 길고 복잡해질 경우 타입 에러를 찾기 어려워진다.
3) 타입 검사
- JavaScript 환경에서는 전달받은 text가 number 타입인데 string으로 변경해도 에러가 나지 않는다.
function ellipsisText(text, limit, symbol='...') {
return `${String(text).slice(0, limit - 1)}${symbol}`
}
ellipsisText(100304040202, 30, 101) // "100304040202101"- 따라서 JavaScript 환경에서 타입 검사를 하기 위해서는 아래와 같이 유형 검사를 하는 추가적인 코드 작성이 필요하다.
function ellipsisText(text, limit, sybol='...') {
if (typeof text !== 'string') throw new Error('1번째 전달인자 유형은 문자여야 함')
if (typeof limit !== 'number') throw new Error('2번째 전달인자 유형은 숫자여야 함')
if (typeof symbol !== 'string') throw new Error('3번째 전달인자 유형은 문자여야 함')
return `${text.slice(0, limit - 1)}${symbol}`
}
ellipsisText(100304040202, 30, 101) // Uncaught Error: 1번째 전달인자 유형은 문자여야 함3. TypeScript
- 타입스크립트는 정작 언어(선언할 때 타입 지정함)이며, 컴파일 시 변수의 타입이 결정된다.
정적 타이핑(Static Typing)
- 변수를 선언할 때 변수에 할당할 값의 타입에 따라 사전에 명시적으로 선언(Type declaration)하여야 하며 선언한 타입에 맞는 값을 할당해야 한다.
- 타입스크립트는 컴파일 언어로 기계어로 변환하는 컴파일 과정이 필요하다. 전체를 한 번에 해석한다.
1) 장점
-
타입 에러로 인한 문제점을 초기에 발견할 수 있어 타입의 안정성이 높다.
-
컴파일 시에 타입을 결정하기 때문에 실행 속도가 빠르다.
2) 단점
- 컴파일 시에 타입을 결정하기 때문에 코드 작성 시 타입을 수정할 경우 번거롭다.
3) 타입 검사
- TypeScript 환경에서는 함수 실행 시, 설정된 타입에 의해 컴파일 과정에서 실시간으로 오류를 표시한다.
function ellipsisText(text:string, limit:number, symbol:string = '...'):string {
return `${text.slice(0, limit - 1)}${symbol}`
}
// Argument of type 'number' is not assignable to parameter of type 'string'.
ellipsisText(10203010201, 30)
FE Developer