[Java Script] 06. 데이터 타입

** 본 글은 모던 자바스크립트 DEEP DIVE 를 읽고 정리한 글입니다.
** 본인이 책 내용의 이해를 돕기 위해 정리한 글이며, 부 정확한 정보전달이 있을 수 있습니다.

 

---

데이터 타입 ?

메모리에 저장되는 데이터의 유형을 뜻한다.

개발끈(?)이 짧아 많은 언어를 접해보진 못했지만, 각 각 언어마다 조금씩 다른 데이터 타입을 가지고 있었다.

그럼 Java Script에서의 데이터 타입, 어떤지 알아보자.

 

데이터 타입의 종류

Java script는 6개의 원시타입과 객체타입 으로, 총 7개의 타입을 갖는다.

• 숫자 number
• 문자열 string
• 불리언 boolean
• undefined undefined
• null null
• 심볼 symbol
• 객체 Object

이렇게 총 7개의 타입이 각 각 어떤 특징을 지닐까?

 

1. 숫자 (number)

말 그대로 값을 계산하는 용도로 사용되는 숫자값이다.

자바스크립트 만의 특징은 보통 다른 언어들은 실수(1.2) 와 정수(1) 의 타입을 나누는 편인데, 자바스크립트는 그런거 없이 number 타입으로 사용한다.

이런 특징은 아직 개발을 많이 해 보진 않았지만, 정수와 실수로 나누지 않아서 오히려 더 편했던 기억이 많았다.

그럼 number 타입의 예시를 자세히 살펴보자.

 

1. 정수, 실수, 음수

var one = 1; // 정수는 number 타입
var two = 2.0; // 실수도 number 타입이고
var three = -3; // 음수 또한 number 타입이다.

 

위와 같이 우리에게 친숙한 숫자들은 모두 number 타입이다.

 

2. 2진수, 8진수, 16진수 (n진수)

var binary = 0b10001; // 2진수 17
var octal = 0o21; // 8진수 17
var hex = 0x11; // 16진수 17

위의 이상한 숫자들 또한 모두 number 타입을 가지며, 각각 17 이라는 숫자를 2진수, 8진수, 16진수 로 표기한 값이다.

표기법은 각 앞에 binary : 0b / octal : 0o / hex : 0x 를 붙여 n진수를 표기하면 된다.

그러나 사실 아직 실무에서 써본적은 없다.

 

3. 무한대와 숫자아님

var infi = 2/0; // Infinity
var infi2 = -2/0; // 음수 Infinify는 따로 표기된다.
var notANum = 'three' * 3; // NaN, 숫자가 아님

이렇게 숫자이지만 숫자가 아닌(?) 특별한 세 가지 값도 number 타입에 속한다.

참고로  ‘three’ + 3 의 을 계산할 경우, 자바스크립트는 자동으로 숫자 3을 문자열 '3'으로 변경하여 계산하기 때문에 NaN라는 결과가 아닌, three3 이라는 결과가 나온다.

특히, 위 값들은 대 /소문자를 유의하여 적자.

 

2. 문자열 (string)

말 그대로 '문자'의 집합이다.

다른 언어의 경우 문자 ('a' 하나) 와 문자열 ('aaa' a여러개) 를 구분하기도 하지만,

자바 스크립트에선 문자 또한 문자열으로 사용한다. 정말 편리하다.

문자열의 표기법(리터럴) 은 따옴표로 감싸주는 것인데,  "   '    `  세 가지를 사용 가능하다.

예시로 좀 더 자세히 알아보자.

var one = 'one'; // 이렇게 감싸주면 된다
var two = "two'; // 이렇게 문자열의 처음과 끝을 다른 기호로 감싸면 오류가 나며
var three = "'three'"; // 이런식으로 문자열 안에 기호를 넣는것도 가능하다.

 

백틱 ` 과 탬플릿 리터럴

위에서 말한 ` 은 백틱 이라고 불리는 특수문자이다.
이 특수문자는 ES6 부터 탬플릿 리터럴 이라는 표기법으로 등장했는데, 굉장히x3 편리하니 꼭 알아두도록 하자.

// 원래 문자열의 경우 줄바꿈을 지원하지 않는다.
var test = “test
!!!”; // error

// 탬플릿 리터럴은 줄바꿈을 지원한다.
var test2 = `test
222!!!!`; // 정상작동​

또한 문자열 내에서 변수와 같은 표현식을 삽입하여 문자열을 완성시킬 수 있다.

var name = "pie";
var message =` hello, ${name}! ` // 출력결과: hello, pie!

 

사용법은 ${} (달러기호와 중괄호) 내부에 표현식을 적어주면 된다.

 

3. 불리언 (boolean)

참과 거짓을 나타내는 타입이다.

true / false 두 가지가 끝이며, 그냥 아래와 같이 사용하면 된다.

var answer = false; // 변수에 할당
while (true) {...} // while 반복문의 조건문으로 사용

 

4. undefined

변수(메모리)가 선언되었으나 할당되지 않은 상태를 뜻하며, 값은 undefined 가 유일하다.

따라서 값이 없음 을 뜻하고 있긴 하지만, 의도적으로 undefined 을 사용하여 값이 없음을 표시하는것은 아직 사용(할당)되지않음 과 혼란을 줄 수 있다.

때문에 값이 없음 은 다음에 배울 null 로 보통 표기한다.

 

5. null

의도적으로 값이 없음 을 뜻하는 타입이며, null 이 유일하다.

또한 우리가 특정 값을 찾을 때, 유효한 값을 반환할 수 없다면 null 을 반환하기도 한다.

 

null과 undefined를 반활할 때 ?

앞서 두 데이터 타입 모두 값이 없음 을 뜻한다. 그리고 우리가 접근하려는 값이 없을 때 종종 undefined 과 null 을 
반환하는 상황이 다른데, 어떤 상황에서 이러한 값이 반환될까?

// 웹에 콘솔창에서 테스트해봅시다.

var $returnNullElement = document.querySelector('.returnNullElement');
console.log($returnNullElement);
// $returnNullElement이라는 element는 없어서, null을 반환합니다.

var arr = [1, 2];
console.log(arr[2]);
// 이 문자열은 index가 1까지만 있어서, 2는 undefined 를 반환합니다.​

이렇게 document.querySelector를 사용하여 HTML Element 에 접근하는건 null 이 반환되지만,
array의 잘못된 index 접근하는건 undefined 을 반환한다.
정확한 상황에 대해 더 공부하면서 알아보자!

 

6. 심볼 (symbol)

심볼은 ES6에서 추가된 타입으로, 변경 및 중복이 불가능하여 유일무이한 원시타입의 값이다.

심볼 타입은 아래와 같은 문법으로 사용할 수 있다.

var value = Symbol("hello");

그러나 아직 써본적은 없으며, 자세한 설명은 추후 symbol에 관해 배울 때 적어보자.

 

7. 객체 타입

이 외에 모든! “이게 무슨타입이지?” 하는 것들은 모두 객체 기반의 타입이다.

한 가지 기억나는 예를 들자면, HTML input:file 으로 파일을 업로드 했을 때

e.target.files[0] // typeof File. 객체 기반의 file 타입이다.

이 값은 File 이라는 객체 기반의 타입이다.

 

 

데이터 타입의 필요성?

코딩을 하면서 데이터 타입을 지키지 않아 오류가 종종 발생한다.

그럼 왜 컴퓨터는 데이터 타입을 명시하고 지켜야 하는 것일까?

 

1. 데이터 타입에 의한 메모리 공간의 확보와 참조

우리가 어떤 값을 변수에 할당할 때 마다, 메모리에 저장되는 값과 셀의 갯수가 다르다.

때문에 이를 효율적으로 할당하고 읽어오기 위해서는 데이터타입의 설정이 필요하다.

즉, 컴퓨터가 나 대신 효율적으로 메모리를 관리하기 위해 타입이 필요하다고 이해하면 될 듯 하다.

 

2. 데이터 타입의 의한 값의 해석

1번에서 말한것 처럼, 데이터 타입을 명시하여 값을 저장하고 불러오는 것 까진 해결되었다.

그럼 값을 해석할 때는 어떨까?

해석 할 때 또한 타입에 같은 데이터가 다른 값으로 해석 될 수 있다.

0100 0001 이라는 2진수의 값의 경우

숫자로 해석: 1000001⇒ 65 (2진수 → 10진수 변환)

문자로 해석: 1000001⇒ ‘A’ (ascii code 65 참조)

이와 같이 다른 같은 값을 어떻게 해석하느냐에 따라 다른 결과를 낼 수 있으므로, 타입이 꼭 필요한 것이다.

 

 

동적 타이핑

다른 언어 (ex. Java)의 경우 변수를 선언할 때 타입을 지정하는 언어들이 있다.

// Java에서의 변수 선언,
String name = "pie"; // 문자열 타입의 변수 name
int age = 27; // 정수 타입의 변수 age

age = "1996" // 에러. int 정수 타입에 String 문자열 타입을 할당할 수 없다.

 

그러나 자바스크립트의 경우 변수 선언시 var, let 과 같은 키워드를 사용하여 변수를 선언한다.

var name = "pie";
var age = 27;

age = "1996"; // 에러 없이 잘 할당된다.

이런식으로 변수의 타입을 지정하지 않고 변수를 선언하며,

각 변수의 이전 타입에 상관 없이 새로운 타입의 값을 할당 할 수 있는게 동적타입의 언어이며, 자바스크립트가 동적 타입의 언어에 해당된다.

 

---

이 동적 타입의 언어인 자바스크립트에 관해 개인적인 이야기를 하고 마무리 짓자면,

처음엔 타입을 지정하지 않아도 되는 자바스크립트가 매우 편리하였다.

여러 타입을 지정하여 프로젝트를 설계하지 않아도 되었고, 타입에러가 없기 때문에 오류가 적어보였다.

그러나 코드 규모가 좀 더 늘어나고, 추후 코드를 수정하는 상황에서 내가 예상치 못한 타입에러는 디버깅과 코드 유지보수가 점점 힘들게 느껴졌다.

 

그래서 지금은 처음에는 조금 더 귀찮지만, 정적 타입언어의 유지보수가 편리하여 정적 타입의 언어를 선호하고있고,

JavaScript에 타입이 추가된 TypeScript를 주로 사용하여 코딩한다.