데이터 타입(Data Type)
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
- 자바스크립트의 타입 유연성을 해결하기 위해 타임스크립트가 탄생
1.숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현
2.문자형(string)
-'',""또는 ``로 둘러싸인 문자의 집합
num = 10
"입력한 숫자는" +num+"입니다.";
`입력한 숫자는 ${num}입니다.`;
3.논리형 (boolean)
- 참(True) 과 거짓(false)으로 표현되는 값
- false, 0, '', "", null, undefined는 모두 거짓(false)로 판정함
-false 가 아닌 모든 값은 참(True)로 판정함
4.undefined, null
- undefined: 타입이 정해지지 않은 타입을 의미(변수 선언후 값이 정해지지 않은 경우)
ex)
let num;
console.log(num) -> undefined
-null: null을 저장한 값.값이 없는것
let obj =null
console.log(obj) -> null
5.심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
const sym1 = Symbol('Apple');
const sym2 = Symbol('Apple');
console.log(sym1==sym2) -> 값이 같은지 비교
-> false뜸 -> 이것은 메모리 주소가 같은지 보는 객체를 비교하는것 값을 보는것이 아니다.
console.log(sym1=== sym2) -> 데이터 타입과 값이 같은지를 비교 -> false
6.객체형 (object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pair 구조로 저장
cosnt user ={userid:'apple',name:'김사과','age':20}
HTML 예제 코드
<!DOCTYPE html>
<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>데이터 타입</title>
</head>
<body>
<h2>데이터 타입</h2>
<script>
// number형
const num1 =10;
const num2 =11.11;
const num3 =10e6;
console.log(num1);
console.log(num2);
console.log(num3);
console.log(typeof(num1));
console.log(typeof(num2));
console.log(typeof(num3));
console.log('------------------')
//string 형
const num4 =10;
const num5 = 5;
const str1 = "Hello JavaScript";
const str2 = "Hello World";
const str3 = "10";
console.log(num4+num5)
console.log(num4+str1)
console.log(str1+str2)
console.log(str1+' '+str2)
console.log(`자바스크립트에서는 문자열을
쌍다옴표 또는 따옴표로 둘러싸인
문자의 집합을 의미합니다`)
console.log(`str1:${str1},str2:${str2}`);
console.log(num4+str3); // 1010
console.log(num4-str3); // 0 -> 자동 형변환
console.log(num4*str3); // 100 자동 형변환
console.log(num4/str3); // 1 -> 자동 형변환
console.log('------------------')
//논리형
const b1 = true;
const b2 = false;
const b3 = (10>5) // true
const b4 = (10<3) // flase
console.log(b1)
console.log(b2)
console.log(b3)
console.log(b4)
console.log(typeof(b1))
console.log('------------------')
//undefined,null
let num;
console.log(num);
console.log(typeof(num))
let obj1 = {}
console.log(obj1);
console.log(typeof(obj1))
let obj2 = null;
console.log(obj2);
console.log(typeof(obj2));
console.log('------------------')
//심볼형
const sym1 = Symbol('apple')
const sym2 = Symbol('apple')
console.log(sym1)
console.log(sym2)
console.log(sym1 == sym2) //값만 같으면 true 데이터 주소가 다르므로 false
console.log(sym1 === sym2) //타입과 값이 모두 같으면 true
const sym3 = sym1
console.log(sym1==sym3) //주소를 저장한것이라 값이 같게 나온다.
//객체형
const user = {'userid':'apple', 'name':'김사과','age':20}
console.log(user); // 브라우저마다 출력값에 포맷이 다를 수 있음
console.log(user.userid);
console.log(user.name);
console.log(user.age);
console.log(`유저의 아이디는 ${user.userid},이름은 ${user.name} 나이는 ${user.age} 입니다`)
</script>
</body>
</html>
결과값
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| JavaScript_대화상자 (0) | 2023.04.04 |
|---|---|
| JavaScript_타입변환 (0) | 2023.04.04 |
| JavaScript_상수 (0) | 2023.04.04 |
| JavaScript_변수 (0) | 2023.04.04 |
| JavaScript _실행 순서 (0) | 2023.04.04 |
