728x90
반응형
SMALL
1. 데이터 타입(Data Type)
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
- 자바스크립트의 타입 유연성을 해결하기 위해 타입스크립트가 탄생
1-1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현
1-2. 문자형(string)
- ' ' 또는 " " 또는 ` `로 둘러싸인 문자의 집합
num = 10;
"입력한 숫자는" + num + "입니다."
`입력한 숫자는 ${num} 입니다.`;
1-3. 논리형(boolean)
- 참(true)과 거짓(false)으로 표현되는 값
- false, 0, '', "", null, undefined는 모두 거짓(false)으로 판정함
- false가 아닌 모든 값은 참(true)로 판정함
- 모두 소문자로 표기(true, false)
1-4. undefined, null
- undefined: 타입이 정해지지 않은 타입을 의미(변수 선언 후 값이 정해지지 않음)
let num;
console.log(num); // undefined (값이 할당되지 않음)- null: null을 저장한 값. 값이 없는 것
let obj = null;
console.log(obj); // null
1-5. 심볼형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
const sym1 = Symbol('Apple')
const sym2 = Symbol('Apple')
console.log(sym1 == sym2) // 값이 같은지 비교 -> 객체 주소값이 같지 않기 때문에 같지 않음
console.log(sym1 === sym2) // 데이터타입과 값이 같은지 비교 -> 같지 않음
1-6. 객체형(object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- key value pair 구조로 저장
const user = {userid:apple', name:'김사과', 'age':20}
<!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.123
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)
const b4 = (10 < 3)
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)) // 타입: undefined
let obj1 = {}
console.log(obj1)
console.log(typeof(obj1)) // 타입: object
let obj2 = null
console.log(obj2)
console.log(typeof(obj2)) // 타입: object
console.log('-------------')
// 심볼형
const sym1 = Symbol('apple')
const sym2 = Symbol('apple')
console.log(sym1)
console.log(sym2)
console.log(sym1 == sym2) // false: 서로 다른 객체에 저장되어있는 객체값이기 때문
console.log(sym1 === sym2) // false: 타입과 값이 모두 같아야 true
const sym3 = sym1
console.log(sym3 == sym1)
console.log(sym3 === sym1)
console.log('-------------')
// 객체형
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>
728x90
반응형
LIST
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트의 연산자(Operator) (0) | 2023.04.06 |
|---|---|
| [JavaScript] 자동 타입 변환 & 타입 변환 함수 & NaN(Not a Number) (0) | 2023.04.06 |
| [JavaScript] 자바스크립트의 변수(variable)와 상수(constant) (0) | 2023.04.05 |
| [JavaScript] 주석문 & VSC 익스텐션 설치 - snippets 등록하는 법 (0) | 2023.04.05 |
| [JavaScript] 자바스크립트의 실행 순서 - <head>태그 사이, <body>태그 끝, <script async>, <script defer> (0) | 2023.04.05 |
