티스토리 뷰

development/html javascript CSS

[JavaScript] 데이터 타입(1) boolean, number, string

Happyoon ~ 2021. 10. 8. 01:19
728x90
반응형

자바스크립트에서는 let을 사용하여 데이터타입을 정의한다.

주의할 점!!

자바스크립트는 파이썬과 마찬가지로 스크립트 언어로 포인터를 사용하지 않는다.

따라서, 숫자, 문자열 등 '값'을 저정하는 변수는 데이터 copy가 되지만, object type을 '='을 사용하면 C언어의 포인터처럼 값 복사가 아닌 주소 참조가 된다.

 

예를 들자면, 

 

let mem1={num:1, name:"김구라", isMan:true};

let a = mem1;
let tmp = a;

mem1.num = 2;
mem1.name = "hello";
mem1.isMan = False;

와 같이 코드를 짰을 때, 처음 예상하던 tmp의 기댓값은 {num:1, name:"김구라", isMan:true} 였지만,

실제 실행결과는 mem1이 변경된 후의 값, 즉 {num:2, name:"hello",isMan:false}가 나왔다. 

 

하지만,

let a = mem1.num;
let b = mem1.name;
let c = mem1.isMan;

mem1.num = 2;
mem1.name = "hello";
mem1.isMan = false;

와 같이 했을 경우, mem1.num 등 mem1의 속성'값'들이 a,b,c에 각각 저장되므로 변경이전의 값 즉, 1, 김구라, true로 잘 나오는 모습을 확인할 수 있다.

 

 

예제1

숫자와 문자열 정의

<!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>Step01_dataType.html</title>
</head>
<body>
    <h1>javascript 데이터 type</h1>
    <script>
        // 숫자 (number) type 데이터
        let num1 = 10;
        let num2 = 10.1;
        // 문자 (string) type 데이터
        let str1 = 'abcd1234';
        let str2 = "김구라";

    </script>
</body>
</html>

 

예제2

boolean 타입, 비교 연산자 알아보기

<!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>Step01_dataType2.html</title>
</head>
<body>
    <h1>javascript 데이터 type</h1>
    <script>
        //참과 거짓을 나타낼때 사용하는 boolean type
        // boolean type 데이터가 들어가는 변수의 이름을 대화식으로 지으면
        // 가독성이 좋다. ( isXXX, canXXX )
        let isRun=true;
        let isWait=false;
        let canEat=true;
        //왼쪽이 오른쪽 보다 큰지 비교
        let result=10>1;  
        //왼쪽이 오른쪽 보다 작거나 같은지 비교
        let result2=10<=1;
        //양쪽의 값이 같은지 비교
        let result3=10==10;
        //양쪽의 값이 다른지 비교
        let result4=10!=10;
         //양쪽의 값이 같은지 비교
        let result5="kim"=="lee";
         //양쪽의 값이 다른지 비교
        let result6="kim"!="lee";

    </script>
</body>
</html>

 

예제3

object type을 이용하여 서로 다른 data type을 한 개의 변수명으로 관리.

object type은 키, 그리고 키에 해당하는 값들로 저장한다. 

삭제는 delete 를 사용하여 삭제.

 

<!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>Document</title>
</head>
<body>
    <h1>javascript 데이터 type</h1>
    <script>
        //회원 한명의 정보라고 가정하자
        //각각의 변수에 대입하면 3개의 변수가 필요 하지만...
        let num=1;
        let name="김구라";
        let isMan=true;

        //다른 data type 을 활용하면 1개의 변수명으로 회원 한명의 정보를 
        //관리 할수 있다.
        let mem1={num:1, name:"김구라", isMan:true};
        let mem2={num:1, name:"김구라", isMan:true};
        let mem3={num:num, name:name, isMan:isMan};

        // a 는 object type
        let a=mem1; // mem1 에 있는 object type 값을 a 에 복사 
        // b 는 number type
        let b=mem1.num;
        // c 는 string type
        let c=mem1.name;
        // d 는 boolean type
        let d=mem1.isMan;

        // object 에 저장된 값을 수정해 보기
        mem2.num=999;
        mem2.name="이정호";

        //빈 object 를 만들고 
        let mem4={};
        

        //나중에 방을 추가 할수 있을까요?
        mem4.num=2;
        mem4.name="해골";
        //나중에 방을 삭제 할수 있을까요?
        delete mem4.name;  // delete 예약어를 이용해서 삭제할수 있다.
    </script>

</body>
</html>
반응형

'development > html javascript CSS' 카테고리의 다른 글

[JavaScript] 데이터타입(3) 함수, undefined  (0) 2021.10.08
[JavaScript] 데이터타입(2) object, array, function / splice(), push()  (0) 2021.10.08
[JavaScript] 함수 이용하기  (0) 2021.10.08
[JavaScript] object와 function  (0) 2021.10.07
[HTML] anchor  (0) 2021.10.07
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함