Dexter_- 2018. 10. 15. 15:37

728x90

기본 타입

📌 타입(data type) 이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.

자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 한다.

자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있다.

원시 타입(primitive type)은 다음과 같다.

숫자(number)
문자열(string)
불리언(boolean)
심볼(symbol) : ECMAScript 6부터 제공됨
undefined
객체(object)

🔔 예제)

var num = 10;    		// 숫자
var myName = "홍길동";  // 문자열
var str;    			// undefined

숫자(number)

📌 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 않고, 모든 수를 실수 하나로만 표현한다.

또한, 매우 큰 수나 매우 작은 수를 표현할 경우에는 e표기법을 사용할 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DataType</title>
</head>
<body>
    <h1>숫자 타입</h1>    
    <p id="number"></p>

    <script>
        var firstNum = 10;        // 소수점을 사용하지 않은 표현
        var secondNum = 10.00;    // 소수점을 사용한 표현
        var thirdNum = 10e6;    // 10000000
        var fourthNum = 10e-6;    // 0.00001

        document.getElementById("number").innerHTML = 
            firstNum + "<br>" + secondNum + "<br>" + thirdNum + "<br>" + fourthNum + "<br>";
   </script>    
</body>
</html>

실행 결과

숫자 타입

문자열(string)

📌 자바스크립트에서 문자열은 큰따옴표("")나 작은따옴표('')로 둘러싸인 문자의 집합을 의미한다.

큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있으며, 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DataType</title>
</head>
<body>
    <h1>문자열 타입</h1>    
    <p id="str"></p>

    <script>
        var firstStr = "이것도 문자열입니다.";        // 큰따옴표를 사용한 문자열
        var secondStr = '이것도 문자열입니다.';        // 작은따옴표를 사용한 문자열
        var thirdStr = "나의 이름은 '홍길동'이야."    // 작은따옴표는 큰따옴표로 둘러싸인 문자열에만 포함될 수 있음.
        var fourthStr = '나의 이름은 "홍길동"이야.'    // 큰따옴표는 작은따옴표로 둘러싸인 문자열에만 포함될 수 있음.

        document.getElementById("str").innerHTML = 
            firstStr + "<br>" + secondStr + "<br>" + thirdStr + "<br>" + fourthStr + "<br>";
   </script>    
</body>
</html>

실행결과

문자열 타입

자바스크립트에서는 숫자와 문자열을 더할 수도 있다.

이럴 경우에 자바스크립트는 숫자를 문자열로 자동 변환하여, 두 문자열을 연결하는 연산을 수행한다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript DataType</title>
</head>
<body>
    <h1>숫자와 문자열의 덧셈</h1>
    <p id="result"></p>
    <script>
        var num = 10;
        var str = "JavaScript";
        
        document.getElementById("result").innerHTML = (num + str);
   </script>    
</body>
</html>

실행 결과

숫자와 문자열의 덧셈

불리언(boolean)

불리언 값은 참(true)과 거짓(false)을 표현한다.

자바스크립트에서 불리언 값은 예약어인 true와 false를 사용하여 나타낼 수 있다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JavaScript DataType</title>
</head>
<body>
    <h1>불리언 타입</h1>
    <p id="result"></p>
    <script>
        var firstNum = 10;
        var secondNum = 11;
        
        document.getElementById("result").innerHTML = (firstNum == secondNum);
   </script>    
</body>
</html>

실행 결과

불리언 타입

심볼(symbol)

심볼 타입은 ECMAScript 6 부터 새롭게 추가된 타입이다.

심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다.

🔔 예제)

<!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>

실행 결과

심볼 타입

💡 심볼 타입은 익스플로러에서 지원하지 않는다.

typeof 연산자

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>

실행 결과

typeof 연산자

null 과 undefined

📌 자바스크립트에서 null이란 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미한다. 또한, undefined 란 null과는 달리 '타입'이 정해지지 않은 것을 의미한다. 따라서 자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

🔔 예제)

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JavaScript DataType</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>

실행 결과

null과 undefined

null 과 undefined는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르므로 주의해야한다.

null 과 undefined는 타입을 제외하면 같은 의미지만, 타입이 다르므로 일치하지는 않는다.

🔔 예제)

null == undefined; // true

null == undefined; // false

객체(object)

자바스크립트의 기본 타입은 객체(object)이다.

객체(object)란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있다.

객체는 여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체이다.

🔔 예제)

<!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>

실행 결과

객체 타입

728x90

저작자표시 비영리 변경금지

'Language > JavaScript' 카테고리의 다른 글

[JavaScript] 반복문(for/in, for/of) (0)	2018.10.16
[JavaScript] 기타 연산자 (0)	2018.10.15
[JavaScript] 변수/연산자 우선순위/비교 연산자 (0)	2018.10.15
[JavaScript] 타입 변환 (0)	2018.10.15
[JavaScript] 기초 (0)	2018.10.15

Embedded Software Embedded Software

기본 타입

숫자(number)

숫자 타입

문자열(string)

문자열 타입

숫자와 문자열의 덧셈

불리언(boolean)

불리언 타입

심볼(symbol)

심볼 타입

typeof 연산자

typeof 연산자

null 과 undefined

null과 undefined

객체(object)

객체 타입

'Language > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바