프론트엔드/TYPESCRIPT

타입스크립트와 자바스크립트 차이, 기본 개념 '정적 vs 동적'

진기명기 2025. 3. 8. 23:47
구구절절 시작 👉🏻 자바스크립트는 불안정한 언어라고들 많이 얘기하는데, 사실 js를 사용하면서 크게 문제점을 느끼지 못했다.
그런데..! 이번 프로젝트를 시작하면서 ts를 써볼까? 싶어 정말 정말 오랜만에 타입스크립트를 사용했는데,
웬걸 js에서는 나지 않는 오류들이 ts에서는 컴파일타임에서부터 에러가 수두룩 나는 것을 보고.. 이때 깨달았다.
'와, 나 typescript 제대로 배워야겠다' 싶어 책까지 구매해서, 내가 이해한 ts에 대해 기록을 해보고자 한다.

타입스크립트와 자바스크립트의 차이 중 가---장 기본 개념인 타입시스템 '정적 타입 vs 동적 타입'

 

 

 


자바스크립트 - 동적 타입 (dynamic typing)

 

✏️ 변수를 선언할 때 타입을 지정하지 않음. 값이 할당될 때 자동으로 타입 결정

const jsTypeFunction = (num) => {
 return num * 2;
}

jsTypeFunction(3) // 6
jsTypeFunction('hi'); // NaN
👉🏻 변수 타입이 런타임에서 결정되기 때문에 jsTypeFunction의 num에 string이 들어오면 예상치 못한 결과를 반환해서 오류를 뱉는다. 코드 작성 시, 직접 타입을 지정해주지 않기 때문에 num에는 string, number, boolean 등의 다양한 타입이 들어올 수 있으며, 이는 언제 오류가 생겨도 이상하지 않을 코드다.

 

 

타입스크립트 - 정적 타입 (static typing)

 

✏️ 변수 선언할 때 타입을 명확하게 지정.

const tsTypeFunction = (num: number) => {
 return num * 2;
}

tsTypeFunction(3) // 6
tsTypeFunction('hi') // ❌ 오류발생 ❌
👉🏻 모든 변수의 타입이 컴파일타임에 결정되기 때문에, 코드 작성 시 타입 에러를 발견할 수 있다.
이는 안정성이 높아지고, 유지보수가 편리해지는 장점이 있다. 즉, 실행 전에 에러를 미리 발견할 수 있음!

 

 

런타임과 컴파일타임
✏️ 런타임 (Runtime)
기계어로 변환된 파일이 메모리에 적재되어 실행되는 시점. 즉, 프로그램이 실제로 실행되는 순간을 의미.

✏️ 컴파일타임 (Compile Time)
컴퓨터가 소스코드를 이해할 수 있도록 기계어로 변환되는 시점. 즉, 코드 실행 전을 의미.