변수에 저장할 수 있는 자료형

변수에 저장할 수 있는 자료형(Data type)으로는 문자형(String), 숫자형(Number), 논리형>(Boolean) 그리고 빈 데이터(Undefined)가 있습니다. 앞으로는 OO형 또는 OO형 데이터라고 부르겠습니다.

문자형

문자형(String) 데이터는 다음과 같이 문자나 숫자를 큰따옴표("")또는 작은따옴표('')로 감싸고 있습니다. 또한 문자형 데이터에 HTML 태그를 포함하여 출력하면 태그로 인식합니다.

{
    var s = "Javascript";
    var num = "100";
    var tag = "String";
}

숫자형

숫자형(Number) 데이터는 단어 의미 그대로 숫자를 의미합니다. 만약 "100"과 같이 큰따옴표가 숫자를 감싸고 있다면 숫자가 아닌 문자형 데이터입니다. 이 경우에는 Number("100")를 이용하면 문자형 데이터를 숫자형 데이터로 바꿀 수 있습니다.

{
    var s = 100;
    var t = Number("500"); // "500" -> 500
}

논리형

논리형(Boolean)데이터는 true(참) 또는 false(거짓)가 있습니다. 이 데이터는 주로 2개의 데이터를비교할 때 나오는 결과입니다. 예를 들어 "100보다 10이 크다."는 잘못된 비교이므로 false라는 결과를 반환하게 됩니다. 논리형 데이터의 기본형은 다음과 같습니다.Boolean()메서드에 데이터를 입력하면 논리형 데이터인 true 또는 false를 반환합니다. Boolean()메서드는 숫자 0과 null, undefined, 빈 문자("")를 제외한 모든 데이터에 대해 true를 반환합니다.다음과 같이 Boolean()메서드에 숫자 0을 입력하면 false라는 값을 반환합니다. 그리고 Boolean()메서드에 "홍길동"을 입력하면 true를 반환합니다. 다음은 논리형 값, 비교 연산자, Boolean 메서드를 사용해 변수에 논리형 데이터를 저장한 후 문서에 출력하는 예제와 결과 화면입니다.


{
    var a = true;
    var b = false;
    var c = 10 > 5; //true
    var d = Boolean(null); //false

    document.write(a, "＜br＞");
    document.write(b, "＜br＞");
    document.write(c, "＜br＞");
    document.write(d, "＜br＞");

    출력
    true
    false
    true
    false
}

null & undefined 데이터

undefined는 다음과 같이 변수 s에 값이 등록되기 전의 기본값이고, null은 변수에 저장된 값이 null인 경우를 가리킵니다. null은 변수에 저장된 데이터를 비우고자 할 때 사용하는 값입니다.


{
    var s; //undefined
    var t = hello;
    t = null;
}

typeof

typeof는 지정한 데이터 또는 변수에 저장된 자료형을 알고 싶을 때 사용합니다. 기본형은 다음과같습니다.
다음은 typeof를 이용하여 변수에 저장된 자료형을 알아내는 예제입니다.10~11행 변수에 저장된 자료형(type)을 출력합니다. document.write(데이터,"<br>")는 화면에 데이터를 출력하고 줄 바꿈합니다.


{
    var num = 100;
    var str = "자바스크립트";

    document.write(typeof num,"＜br＞");
    document.write(typeof str);

    출력
    Number
    string
}

객체(Object)

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다.
객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value Pair를 저장할 수 있는 구조이다.

객체의 생성방법

객체는 다음과 같은 방법으로 선언할 수 있다.

{
    const obj = new Object();
    or
    const obj = {};
}

자바스크립트 객체의 종류

1. JavaScript 내장 객체 (Built-in Object)

JavaScript 엔진이 구동되는 시점에서 바로 제공되며 JavaScript코드 어디에서든 사용이 가능하다. 아래의 내장 객체들 외에도 많은 내장 객체들이 있다.

{
    Global
    Object
    String
    Number
    Boolean
    Date
    Array
    Math
}

2. 브라우저 내장 객체 (Native Object)

브라우저 내장 객체 또한 JavaScript가 구동되는 시점에서 바로 사용이 가능한 객체들이며 내장 객체이다. 하지만 브라우저마다 브라우저 내장 객체를 사용함에 있어 구성을 달리하는 경우가 있기 때문에 JavaScript 내장 객체와 분류해 두었다. 하지만 브라우저 내장 객체는 브라우저, 즉 JavaScript 엔진을 구동하는 것들에서 build되는 객체들이다. 예시로는 BOM과 DOM이 있다. 이 객체들은 자바스크립트 내장객체가 구성된 후에 구성이 된다.


        1. 브라우저 객체 모델(BOM)
        2. 문서 객체 모델 (DOM)

3. 사용자 정의 객체 (Host Object)

말 그대로 사용자가 생성한 객체들로 생성자 함수 또는 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 객체들이기 때문에 내장 객체들이 구성된 이후에 구성되어 진다.

객체의 특징