04 타입, 값의 종류!
# 타입, 값의 종류!
## 미션
타입이란 무엇이고, 기본이 되는 종류 몇 가지를 설명하시오.
<img src="http://drive.google.com/uc?export=view&id=1g7Zg-_91i8egQNeY385cXX0SsBZYHaqP" alt="홍팍-자바스크립트-데이터-타입">
## 02:33 기본 파일 생성
#### types.html
```
<!-- HTML 관련 키워드, MDN(https://developer.mozilla.org/ko)에서 검색 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 외부 파일 연결 -->
<link rel="stylesheet" href="types.css">
<Script src="types.js"></script>
</head>
<body>
<!-- 제목 -->
<h1>타입, 값의 종류!</h1>
<p>데이터는 특징에 따라 분류됨. 그 기준을 타입이라 함.</p>
<img src="http://drive.google.com/uc?export=view&id=1g7Zg-_91i8egQNeY385cXX0SsBZYHaqP" alt="다양한-타입의-음료들">
<!-- 숫자(number) 타입 -->
<h2>numbers, 숫자 타입</h2>
<ul>
<li>integer, 딱 떨어지는 수 👉 -1, 0, 1, 2</li>
<li>float, 소수점 이하를 포함하는 수 👉 3.14, -9.81;</li>
</ul>
<!-- 문자열(string) 타입 -->
<h2>string, 여러개의 문자들</h2>
<ul>
<li>const name = "홍팍";</li>
<li>const starSign = '천칭자리'</li>
</ul>
<!-- typeof, 타입 확인 -->
<h2>typeof, 타입 확인하는 법!</h2>
<ul>
<li>typeof 1234;</li>
<li>typeof "1234";</li>
<li>typeof starSign;</li>
</ul>
<!-- boolean, 타입 확인 -->
<h2>boolean, 참과 거짓!</h2>
<ul>
<li>typeof true;</li>
<li>typeof false;</li>
<li>const hungry = true;</li>
<li>typeof hungry;</li>
</ul>
<!-- 미지정 vs 없음 -->
<h2>미지정(undefined) vs 값이 없음(null)</h2>
<ul>
<li>let dinner; // undefined, 이름표만 만들고 값을 미지정!</li>
<li>typeof dinner</li>
<li>dinner = "🍕 피자"; // string 값을 변수에 연결</li>
<li>typeof dinner</li>
<li>dinner = null; // null, 값을 연결하지 않기로 함!</li>
<li>typeof dinner</li>
</ul>
</body>
</html>
```
#### types.css
```
/* CSS 관련 키워드, MDN(https://developer.mozilla.org/ko)에서 검색 */
body {
font-family: Arial, Helvetica, sans-serif;
}
img {
max-height: 300px;
display: block;
margin: 0 auto;
}
```
#### types.js
```
// JavaScript 관련 키워드 검색
// 👉 MDN(https://developer.mozilla.org/ko)
'use strict';
```
## 03:41 number, 숫자 타입
#### 정수(integer)와 실수(float)
```
// 1. number, 숫자 타입
const birthYear = 1986; // 정수(integer)
console.log(birthYear);
const weight = 75.24; // 실수(float)
console.log(weight);
```
## 05:13 string, 문자열 타입
#### types.js
```
// 2. string, 여러개의 문자들
const nickname = "홍팍";
const starSign = '천칭자리';
const bloodType = `Rh+ A형`;
console.log(nickname);
console.log(starSign);
console.log(bloodType);
```
## 07:05 typeof, 타입 확인하기
#### types.js
```
// 3. typeof, 값 또는 변수의 타입을 확인하는 법!
console.log(typeof 1234);
console.log(typeof "1234");
console.log(typeof starSign);
```
## 08:23 boolean, 참과 거짓
#### types.js
```
// 4. boolean, 참과 거짓!
console.log(typeof true); // 참
console.log(typeof false); // 거짓
const hungry = true;
console.log(hungry);
```
## 09:50 undefined vs null
#### types.js - 미지정과 값 없음의 차이
```
// 5. 미지정 vs 값이 없음
let dinner; // 이름표만 만든 변수! (미지정)
console.log(typeof dinner);
dinner = "🍕 피자" // 피자를 먹기로 함! (문자열 지정)
console.log(typeof dinner);
dinner = null; // null, 값이 없음을 지정!
console.log(typeof dinner);
```
## 구글링 훈련 🔥
- 자바스크립트 primitive 타입
- 자바스크립트 정수 실수 차이
- 자바스크립트 undefined null 차이
- 자바스크립트 number NaN 비교