ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [타입] - 기본 타입
    JavaScript/기본 1 2022. 1. 8. 17:36
    • 타입 : 프로그램에서 다룰 수 있는 값의 종류를 의미한다.
      • 원시타입
        1. 숫자(number)
        2. 문자열(string)
        3. 불리언(boolean)
        4. 심볼(symbol) : ECMAScript 6부터 제공
        5. undefined
      • 객체 타입
        1. 객체(object)

    • 숫자 (number)
      • 다른언어와 달리 정수와 실수 따로 구분하지 않고, 모든 수를 실수 하나로만 표현
      • 매우 큰 수 또는 매우 작은 수 표현 시 e표기법 사용
        // 숫자 타입
        
        var firstNum = 10; // 소수점을 사용하지 않은 표현
        var secondNum = 10.00;  // 소수점을 사용한 표현
        var thirdNum = 10e6;    // 10000000
        var fourthNum = 10e-6;  // 0.00001​
    • 문자열 (string)
      • 큰 따옴표나 작은 따옴표로 둘러싸인 문자의 집합
        // 문자열
        
        var firstStr = "이것도 문자열입니다."; // 큰따옴표를 사용한 문자열
        var secondStr = '이것도 문자열입니다.'; // 작은따옴표를 사용한 문자열
        var thirdStr = "나의 이름은 '홍길동'이야."; // 작은 따옴표는 큰 따옴표로 둘러싸인 문자열에만 포함
        var fourthStr = '나의 이름은 "홍길동"이야.'; // 큰 따옴표는 작은 따옴표로 둘러싸인 문자열에만 포함​
      • 숫자와 문자열을 더할 수 있다.
        var num = 10;
        var str = "JavaScript"
        
        document.getElementById("result").innerHTML = (num + str)
        // 10JavaScript​
    • 불리언 (boolean)
      • true / false
    • 심볼 (symbol)
      • 유일하고 변경할 수 없는 타입
      • 객체의 프로퍼티를 위한 식별자로 사용
      • 익스플로러에서 지원하지 않는다.
        <!DOCTYPE html>
        <html lang="ko">
        
        <head>
            <meta charset="UTF-8">
            <title>JavaScript DataType</title>
        </head>
        
        <body>
            <h1>심볼 타입</h1>
            <p id="result"></p>
            
            <script>
                var sym - Symbol("javascript");
                var symObj = Object(sym);
                
                document.getElementById("result").innerHTML = (typeof sym) + "<br>" + (typeof symObj);
            </script>
        </body>
        </html>
        
        <!-- output
            symbol
            object
        -->
    • typeof 연산자
      • 피연산자의 타입을 반환하는 피연산자가 단 하나뿐인 연산자
        <!DOCTYPE html>
        <html lang="ko">
        
        <head>
            <meta charset="UTF-8">
            <title>JavaScript DataType</title>
        </head>
        
        <body>
            <h1>typeof 연산자</h1>
            <p id="result"></p>
            
            <script>
                document.getElementById("result").innerHTML = (typeof 10) + "<br>";
                document.getElementById("result").innerHTML = (typeof "문자열") + "<br>";
                document.getElementById("result").innerHTML = (typeof true) + "<br>";
                document.getElementById("result").innerHTML = (typeof undefined) + "<br>";
                document.getElementById('result").innerHTML = (typeof null);
            </script>
        </body>
        </html>
        
        <!-- output
        
        typeof 연산자
        number
        string
        boolean
        undefined
        object
         -->
    • null / undefined
      • 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지 않는다. 
      • null
        • object타입
        • 아직 "값"이 정해지지 않은 것
      • undefined
        • "타입"이 정해지지 않은 것
        • 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환
      • <!DOCTYPE html>
        <html lang="ko">
        
        <head>
            <meta charset = "UTF-8">
            <title>JavaScript</title>
        </head>
        
        <body>
            <h1>null과 undefined</h1>
            <p id="result"></p>
            
            <script>
                var num;  // 초기화하지 않았으므로 undefined값을 반환
                var str = null; // object타입의 null값
                
                // 정의되지 않은 변수에 접근하면 undefined값 반환
                document.getElementById("result").innerHTML = 
                    (typeof num) + "<br>" + (typeof str) + "<br>" + (typeof secondNum);
            </script>
        </body>
        </html>
        
        <!-- output
        
        null과 undefined
        
        undefined
        object
        undefined
        
        -->
        
        <!-- 참고  -->
        null == undefined; <!-- true -->
        null === undefined; <!-- false -->
    • 객체 (object)
      • 실생활에서 우리가 인식할 수 있는 사물로 이해
      • 여러 프로퍼티나 메소드를 같은 이름으로 묶어놓은 일종의 집합체
        <!DOCTYPE html>
        <html lang="ko">
        
        <head>
            <meta charset="UTF-8">
            <title>JavaScript DataType</title>
        </head>
        
        <body>
            <h1>객체 타입</h1>
            <p id="result"></p>
            
            <script>
                var dog = { name: "해피", age: 3}; // 객체 생성
                
                // 객체의 프로퍼티 참조
                document.getElementById("result").innerHTML = 
                    "강아지의 이름은" + dog.name + "이고, 나이는" + dog.age + "살 입니다.";
            </script>
        </body>
        </html>
        
        <!-- output
        
         객체 타입
         강아지의 이름은 해피이고, 나이는 3살 입니다
          -->

    'JavaScript > 기본 1' 카테고리의 다른 글

    [타입] - 변수  (0) 2022.01.08
    [타입] - 타입 변환  (0) 2022.01.08
    [기초] - 자바스크립트 적용  (0) 2022.01.08
    [기초] - 자바스크립트 출력  (0) 2022.01.08
    [기초] - 자바스크립트  (0) 2022.01.08
Designed by Tistory.