[JS Deep Dive] 6장 - 데이터타입

 

📌 1. 데이터 타입이란?

• 값의 종류를 말한다.
• 자바스크립트의 모든 값은 데이터 타입을 가진다. 
• 7개의 데이터 타입은 원시타입과 객체타입으로 구분할 수 있다.

 

---

🤔  1-1. 타입을 왜 알아야할까?

 

 1️⃣ 해석이 달라짐

예를들어 숫자 타입의 값 1과 문자열 타입의 값 '1' 은 비슷해보이지만 전혀 다른 값이다. 생성한 목적과 용도가 다른데 숫자 타입은 주로 산술 연산을 위해 사용이 되는 것이고 문자열 타입의 값은 주로 텍스트를 화면에 출력하기 위함이다. 

 

2️⃣ 데이터 타입에 의한 메모리 공간의 확보와 참조 

값은 메모리에 저장하고 참조할 수 있어야 한다.

자바스크립트는 값의 종류에 따라 정해진 크기의  메모리 공간을 확보한다. 즉... 값의 데이터 타입에 따라 확보해야할 메모리 공간의 크기가 결정이 되기 때문에 확보해야할 몇바이트의 메모리 공간을 사용해야 낭비와 손실없이 효율적으로 값을 저장할 수 있을지 알아야한다. 

 

또한 값을 참조할 때에도 한 번에 읽어들어야 할 메모리 공간의 크기, 메모리 셀의 개수를 미리 알아야 한다. 

따라서 변수에 저장된 타입의 값을 보고  메모리 공간에 저장된 값을 읽어들일 수 있다. 

 

3️⃣ 데이터 타입에 의한 값의 해석

모든 값은 데이터 타입을 가지기 때문에 2진수, 즉 비트의 나열로 저장이 된다. 

메모리에 저장된 값은 데이터 타입에 따라 이 2진수가 다르게 해석이 될 수 있다. 

 

예를 한번 들어보자 우리 0100 0001 이라는 것이 저장이 되어있다고 생각해보자.

2진수를 숫자로 해석하면 65지만 문자열로 해석하면 'A' 가 나온다.

 

결론을 말해보자!

데이터 타입을 알아야하는 이유

* 값을 저장할 때 확보해야하는 메모리 공간의 크기 결정하기 위함
* 값을 참조할 때 한 번에 읽어들여야 할 메모리 공간의 크기를 결정하기 위함 
* 메모리에서 읽어들인 2진수를 어떻게 읽어들여야 할 지 결정하기 위함 (=> 데이터 타입마다 해석이 달라짐) 

 

 

 

 

1-2. 데이터 타입의 종류

구분	데이터타입	설명
원시타입	숫자타입	숫자 정수, 실수 구분 없이 하나의 숫자타입만 존재
	문자열타입	문자열
	불리언타입	논리적 참과 거짓
	undefined 타입	var 키워드로 선언된 변수에 암묵적으로 할당되는 값
	null 타입	값이 없다는 것을 의도적으로 명시할 때 사용
	심벌 타입	ES6에서 추가된 7번째 타입
객체타입		객체함수, 배열

 

 

---

✅ 2. 원시타입 

2-1. 숫자타입

다른 프로그래밍 언어는 보통 정수와 실수를 구분해서 다양한 숫자 타입을 제공한다.

하지만 자바스크립트는 독특하게 하나의 숫자타입만 제공한다.

 

=> 모든 수를 실수로 처리하며 정수로 표현하기 위한 데이터 타입이 별도로 존재하지 않는다. 

=> > 이 의미는... 정수로 표현이 된다고 해도 사실은 실수이고... 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다는 것이다.

 

//숫자타입
var integer = 10; //정수
var double = 10.12; //실수
var negative = -20; //음의정수


// 숫자타입은 모두 실수로 처리됨
console.log(1===1.0) //true

 

추가적으로 특별한 값들도 있다.

 

• Infinity : 양의무한대
• -Infinity : 음의무한대
• NaN : 산술연산불가 (Not - A - Number )

console.log (10 / 0); // Infinity
console.log (10 / -0);  //-Infinity
console.log (1 * 'String'); //NaN

 

2-2. 문자열 타입

텍스트 데이터를 나타낸다. 

작은 따옴표, 큰 따옴표, 백틱으로 텍스트를 감싼다.

-> 만약 문자열을 따옴표로 감싸지 않으면 키워드나 식별자 같은 토큰으로 인식해버리거나 스페이스같은 공백문자도 포함할 수 없다.  

 

var string = hello;

// ReferenceError: hello is not defined
// 따옴표로 감싸지 않아서 식별자로 인식해부림...

 

 

2-3. 템플릿 리터럴

 

ES6 부터 새로운 문자열 표기법이 도입되었다.!

멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등... 편리한 문자열 처리 기능을 제공한다.

템플릿 리터럴은 일반 문자열과 달리 이스케이프 시퀀스를 사용하지 않고도 줄바꿈이 허용되며 공백도 있는 그대로 적용이 된다.

템플릿 리터럴은 런타임에 일반 문자열로 변환되어 처리된다.

 

 

⏭️ 멀티라인 문자열

- 원래 일반 문자열 내에서 줄바꿈이 허용되지 않는다.

- 따라서 일반 문자열 내에서 줄바꿈 등의 공백을 표현하기 위해서는 백슬래시 (\) 로 시작하는 이스케이프 시퀀스를 사용해야한다. 

이스케이프 시퀀스	의미
\0	Null
\b	백스페이스
\f	폼피드: 프린터로 출력할 경우 다음 페이지의 시작지점으로 이동
\n	개행 : 다음 행으로 이동 (개행문자란 텍스트의 한 줄이 끝남을 표시하는 문자 )
\r	개행 : 커서를 처음으로 이동
\t	탭(수평)
\v	탭(수직)
\uXXXX	유니코드
\ '	작은따옴표
\ "	큰따옴표
\\	백슬래시

 

멀티라인 문자열을 사용한 코드

var template = '<ul> \n\t<li><a href="#">Home</a></li>\n </ul>';
console.log(template)

//출력결과
// <ul>
//    <li><a href="#">Home</a></li>
// </ul>

 

이스케이프 시퀀스를 사용했을 경우: 공백같은게 바로 적용이 되어서 훨씬 깔끔해보임

var template = `<ul>
    <li><a href="#">Home</a></ul>
    </ul>`;
    
console.log(template)


//출력결과
// <ul>
//   <li><a href="#">Home</a></li>
// </ul>

 

 

⏯️ 표현식 삽입

템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열을 삽입할 수 있음 => ${ } 로 표현식을 감싸면 된다.

이때 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입이 강제로 변환되어 삽입됨

표현식 삽입은 반드시 템플릿 리터럴 내에서 사용해야 한다.

템플릿 리터럴이 아닌 일반 문자열에서의 표현식 삽입은 문자열로 표현된다.

 

일반 문자열에서의 표현식삽입 코드

var first = "hilong";
var last = "kim";

//ES5 문자열
console.log('My name is' + first + '' + last + '');

//my name is hilong kim

 

템플릿 리터럴 로 표현식 삽입 : 거추장스러웠던 + 를 안써도 되고 따옴표도 계속해서 쓸필요가 없다 나이스다.

 

var first = "hilong";
var last = "kim";

//ES6 표현식 삽입
console.log(`My name is ${first} ${last}`);

//my name is hilong kim

 

2-4. undefined 타입

var foo;
console.log(foo);

//undefined

 

 

코드를 먼저 살펴보자. 우리 이 코드를 봤을 때 undefined 가 나오는 것을 확인할 수 있다.

그렇다면 우리가 변수가 선언 이후 값이 할당되지 않은 변수라는 것을 확인할 수 있다.

undefined 는자바스크립트 엔진이 변수를 초기화할 때 사용하는 값이기 때문에 만약에 값이 없다는 것을 의도적으로 명시하고 싶을 때는 undefined 가 아니라 null 이라는 아이를 사용한다.

 

2-5. null  타입

• null 은 변수에 값이 없다는 것을 의도적으로 명시할 때 사용한다.
• null을 할당하는 것은 이전에 참조하던 값을 더이상 참조하지 않겠다는 의미이다. 
• 즉 이것은 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하겠다는 것이다.
• 또한 함수가 유효한 값을 반환할 수 없는 경우에도 명시적으로 null 을 반환한다.