JavaScript_데이터 타입

diary100 2023. 4. 4. 15:37

데이터 타입(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>

결과값