자바스크립트와 타입스크립트를 공부하면서 이질감을 느꼈다. 타입스크립트를 굳이 왜쓰지..? 라는 생각이 들었고 타입스크립트가 뭘 하든 데이터타입을 지정해줘야 하다보니 우선 자바스크립트의 데이터 타입에 대해 자세하게 알아봤다.

자바스크립트의 모든 값은 데이터 타입을 갖고 있으며 자바스크립트(ES6)는 7개의 데이터 타입을 제공한다. 크게 원시타입과 객체 타입으로 분류가 가능하다.
원시타입은 아래와 같이 있고

숫자 : number (숫자)
문자열 : sring (문자)
불리언 : boolean (true나 false)
undefined : undefined (변수 선언시 암묵적으로 할당되는 값, 정의된거 없다는 거)
null : null (값 없음)
심벌 : symbol(key값, 다른값과 중복되지 않는 유일무이한 값)

객체타입으로는 아래와 같이 있다.

객체{}, 함수function(){}, 배열[] 등

정리해보자 테이터 타입

데이터타입에 대해 더 자세히 살펴 보자면

1.숫자 타입

자바스크립트의 숫자 타입은 모든 수를 실수로 처리하며 정수만을 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 즉, 2진수,8진수 등 이러한 수도 모두 저장될 때는 2진수로 해석할 때는 10진수로 해석된다.
거기다 위에 말했듯이 모든 타입을 실수로 처리하기에

console.log(1 === 1.0); //true

같은 식도 성립한다.
추가로 세 가지 특별한 값도 표현할 수 있다.

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN : 산술 연산 불가

2.문자열 타입

문자열은 작은따옴표(''), 큰따옴표(""), 백틱(``)으로 표현 할 수 있다.
문자열을 사용할 때 보통 작은따옴표(''), 큰따옴표("")으로 텍스트를 감싸면 문자열로 인식이 된다.

2-1.템플릿 리터럴(백틱)

백틱은 ES6부터 도입된 새로운 문자열 표기법인데 기존과의 차이점이 있다.

2-1-1.문자열 내에서의 줄바꿈을 허용해준다.

이전에는 이스케이프 시퀀스(백슬래시())라는 것을 이용하여 문자열의 줄바꿈을 했어야 했는데 백틱을 이용하면 줄바꿈이 허용되며 공백도 그대로 적용된다.

2-1-2.표현식 삽입을 편하게 할 수 있다.

이전 문자열 사이에 표현식을 삽입하기 위해선 +기호를 사용 하였지만 백틱내에서는 ${}로 표현식을 감싸는 것만으로 편하게 삽입 할 수 있다.

3.불리언 타입

true와 false값을 말한다.

4.undefined 타입

undefined 타입의 값은 undefined가 유일하다. var, let, const같은 변수 선언시 암묵적으로 undefined 초기화 된다. 즉 변수 선언 후 값을 할당하지 않은 변수를 참조하면 undefined가 반환되는 것을 볼 수 있다.

5.null 타입

null 또한 null이 유일하며 변수에 값이 없다는 것을 의도적으로 명시 할 때 사용 한다.

6.심벌 타입

심벌 타입은 ES6에서 추가된 타입으로 변경 불가능한 타입 값이다. 심벌 값은 다른 값과 중복 되지 않는 유일무이한 값이며 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들 때 사용 된다.

//심벌 값 생성
let key = Symbol('key');
console.log('key')//symbol

//객체 생성
var obj = {};

//심벌을 키값으로 사용
obj[key] = 'value';
console.log(obj[key]) // value

7.객체 타입

자바스크립트를 이루고 있는 거의 모든 언어, 자바스크립트 자체가 객체 기반의 언어이다.

그렇다면 왜 데이터 타입을 알아야하고 필요할까?

데이터 타입의 필요성

사실 자바스크립트가 알아서 우다다 데이터 타입을 해결해주기에 기존에는 필요성에 대해 잘 몰랐으나 좀 더 공부하고 원리를 살펴보다 '아 필요하네' 라고 생각하게 되었다. 타입스크립트는 정말 귀찮지만 써야겠다 싶었다. 그 이유는 아래와 같다.

예시로 만약

let data = 100;

이라는 변수를 선언했을 경우 이 코드가 실행되면 컴퓨터는 100이라는 값을 저장하기 위해 메모리 공간을 확보한 다음, 확보된 메모리에 100을 2진수로 저장한다. 앞에 100은 숫자 타입이지만 문자열 타입이거나 다른 타입일 경우 필요한 메모리 공간이 다르다. 즉 자바스크립트라는 값의 종류에 따라 정해진 크기의 메모리 공간을 확보하기에 데이터 타입이 필요하며 값을 꺼내어 사용 할 때에도 타입에 따라 필요한 만큼 한 번에 읽어 들여야 할 메모리 공간의 크기를 설정하기에 메모리 셀의 개수, 즉 바이트 수를 알아야 하기에 데이터 타입이 필요하다.
거기다 이 읽어드린 2진수를 어떻게 해석하느냐에 따라 문제가 생긴다. 데이터 타입이 없을 경우 이 100을 숫자로 해석하면 100이 되지만 문자로 해석할 경우 'A'가 되버린다. 이러한 문제 때문에도 데이터 타입이 필요하다.

정리하자면 데이터 타입은
값을 저장 할 때 확보해야 하는 메모리 공간의 크기를 결정하기 위해
값을 참조 할 때 한번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
필요하다

동적 타이핑

위에서 자바스크립트의 모든 값은 데이터 타입을 갖는다고 했는데 그럼 변수는 데이터 타입을 가질까? C나 자바 같은 아이들은 정적타입 언어, 즉 변수를 선언할 때 변수에 할당할 수 있는 값의 종류를 선언해야 한다. 이를 명시적 타입 선언이라하며 태생부터 낙인을 찍어버리는 것 같이 정적 타입 언어는 변수의 타입을 변경 할 수 없고 변수에 선언한 타입에 맞는 값만 할당할 수 있다.
하지만 이와 다르게 내가 아껴줘야하고 사랑해야하는 자바스크립트는 동적 타입의 언어로 변수를 선언할 때 타입을 선언하지 않는다. 다만 변수를 선언할 뿐이다.
자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 변하게 할 수도 있다. 이게 엄청 유연해보이고 편해보이지만 사실 프로젝트가 커질 경의 변수 값을 추적하기 어려워 신뢰성이 떨어지게 된다.

그래서 자바스크립트를 변수를 사용 할 때에도 위와 같은 이유 때문에 주의할 내용들이 있다.

1. 변수는 꼭 필요한 경우에 한해 제한적으로 사용하자
2. 변수의 유효 범위는 최대한 좁게 만들어주자
3. 전역 변수는 최대한 피하자
4. 변수보다는 상수를 사용하자(const애용하기)
5. 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍하자

이러한 이유로 타입스크립트로 데이터 타입을 정확히 명시해 오류를 줄여나가는 것에 매력을 느끼게 되었다.