[프론트엔드 기술 선정과 그 이유] JavaScript vs TypeScript

Javascript와 Typescript의 가장 핵심적인 차이는 type이 있느냐 없느냐이다.

// JS
let a = 1;
let b = 2;

let c = a + b;

// TS
let a: number = 1;
let b: number = 2;

let c: number;
c = a + b;

💡 TS 장점 - type이 있음으로써 좋아지는 점?

1. 런타임 에러 vs 컴파일 에러

// JS
const plus = (a, b) => {
    let c = a + b; // 1.runtime err 발생
    return c;
};

let a = 1;
let b = 'aa';

console.log('a + b = ' + plus(a, b));

// TS
const plus = (a: number, b: number): number => {
    let c: number = a + b;
    return c;
};

let a: number = 1;
let b: number = 'aa'; // 2. compile err 발생

console.log('a + b = ' + plus(a, b));

type을 명시함으로써 컴파일 단에서 미리 선언될 수 없는 변수를 차단

2. IDE와의 결합성

• TS는 JS보다 IDE와의 결합성이 훨씬 좋다.
• TS는 ctrl + click으로 웬만한 class와 fuction을 쉽게 역추적 할 수 있다.
• 물론 JS도 IDE에서 해당 기능을 제공하지만 쉽게 역추적 되지 않는 경우가 많다.
• 그럴땐 find를 통해서 찾아야만 한다. 클릭 한번, 타자 한번이 쌓여서 시간을 잡아먹는다.

3. 가독성

• TS는 자료형을 명시함으로써 어떤형의 데이터가 들어가고 어떤 형의 data가 return 되는지 쉽게 알 수 있다.
• JS의 경우에는 따로 설명이 되어 있지 않거나 네이밍이 이상할 경우, 직접 들어가서 코드를 읽는 수 밖에 없다.
• 또한 JS의 input이나 return 값이 object일 경우는 코드를 읽기가 더 힘들어진다.
• 하지만 TS는 interface로 type을 새로 선언함으로써 어떤 데이터가 들어가고 어떤 데이터가 return 되는지 좀더 쉽게 파악이 가능하다. 즉, 가독성이 좋아진다.

💡 JS 장점 - 하지만 JS가 좋을 수도 있잖아?

1. 유연성 & 생산성

// JS
let a = 'string';
let b = 2;
a = 1;

let c = a + b;
console.log('a + b = ', c);

// TS
let a: string = 'string';
let b: number = 2;
a = 1;

let c: number = a + b;
console.log('a + b = ', c);

• 위 코드를 보면 알 수 있듯이 JS는 a라는 변수를 자료형을 바꿔가면 사용하는게 가능하다. TS는 불가능하다.
• 또한 number나 string이 기본 자료형이 아닌 object같이 복합 자료형일 경우엔 TS는 선언해줘야 할 게 정말 많다.
• 그래서 코드 작성을 유연하게 하지 못할 때가 정말 많다.
• JS라면 3줄이면 될 것을 TS는 10줄 또는 그 이상을 작성해야 할 때도 있다.
  
  

	JavaScript	TypeScript
장점	코드 작성이 유연하다. 빠른 코딩이 가능하다.	컴파일 시 에러를 잡을수 있다. IDE와 결합성이 좋다. 코드 가독성이 좋다.
단점	프로그램이 알수 없는 에러로 죽곤 한다. 코드 가독성이 비교적 떨어진다. IDE와 결합성이 비교적 떨어진다.	코드 작성에 제약이 많다. 코드 작성에 시간이 많이 걸린다. 여러가지 설정이 좀 많다.

✅ 결론 - TypeScript를 쓰자

• 컴파일로 많은 에러를 사전에 예방할 수 있고 가독성이 좋다.
• 협업 시에 서로 빠르게 코드를 이해할 수 있다.
• JS의 장점인 유연성과 생산성은 TS의 any 자료형을 사용함으로써 어느정도 해결이 가능하다.
• any는 어떤 자료형이든 허용하기 때문에 경우에 따라 유연하게 사용할 수도 있고 제약적으로 사용할 수도 있다.