JSON(JavaScript Object Notation) 소개 2

3. JSON의 데이터 타입(자료형)

JSON의 데이터 타입은 다음과 같다.

- string
- number
- boolean
- null
- array
- object

JSON Object의 각 프로퍼티 자료형은 "typeof"를 통해 확인이 가능하며, 각 자료형을 실제로 이용하는 예제를 통해 알아보기로 하자.

아래의 각 예제들은 typeof를 통해 오브젝트 또는 프로퍼티의 자료형을 확인하고, 오브젝트의 프로퍼티 값을 확인하는 예제이다.


■ string

string은 큰따옴표안에 둘러 싸인 zero 이상 Unicode 문자들의 조합이며, 쌍다옴표안에 감싸지며,backslash escape가 적용된다. 하나의 문자(character)도 하나의 문자열(character string)로서 표현된다. string은 C 또는 Java 문자열 처럼 매우 많이 비슷하다.

<script language="JavaScript">
<!--
  var obj1 = {
    "test" : "abc"
  };
//-->
</script>

<input type="button" onclick="alert(typeof obj1.test)" value="click">
<input type="button" onclick="alert(obj1.test)" value="click">

■ number

number는 8진수와 16진수 형식을 사용하지 않는것을 제외하면 C와 Java number 처럼 매우 많이 비슷하다.

<script language="JavaScript">
<!--
  var obj2 = {
    "test" : 123
  };
//-->
</script>

<input type="button" onclick="alert(typeof obj2.test)" value="click">
<input type="button" onclick="alert(obj2.test)" value="click">

■ boolean

boolean은 true/false의 값을 사용하며, C나 java의 boolean형과 비슷하다.

<script language="JavaScript">
<!--
  var obj3 = {
    "test" : true
  };
//-->
</script>

<input type="button" onclick="alert(typeof obj3.test)" value="click">
<input type="button" onclick="alert(obj3.test)" value="click">

■ null

null은 어떠한 형태를 담기 이전의 상태로, object로 취급받게 되며, 데이터가 할당되면 할당된 데이터의 타입에 따라 다시 구분되게 된다.

<script language="JavaScript">
<!--
  var obj4 = {
    "test" : null
  };
//-->
</script>

<input type="button" onclick="alert(typeof obj4.test)" value="click">
<input type="button" onclick="alert(obj4.test)" value="click">
<input type="button" onclick="obj4.test=false; alert(obj4.test)" value="click">

■ array

 array은 값들의 순서화된 collection 이다. array는 [ (left bracket)로 시작해서 ] (right bracket)로 끝내어 표현한다. , (comma)로 array의 값들을 구분한다.

1) 1차원 배열
<script language="JavaScript">
<!--
  var obj5 = [
    "test"
  ]
//-->
</script>

<input type="button" onclick="alert(typeof obj5[0])" value="click">
<input type="button" onclick="alert(obj5[0])" value="click">

2) 2차원 배열
<script language="JavaScript">
<!--
  var obj6 = {
    "test" : [
      "ccc", "ddd"
    ]  
  }
//-->
</script>

<input type="button" onclick="alert(typeof obj6.test)" value="click">
<input type="button" onclick="alert(obj6.test[0])" value="click">
<input type="button" onclick="alert(obj6.test[1])" value="click">

■ object

 object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.

<script language="JavaScript">
<!--
  var obj7 = {
    "test" : {
      "name" : "k2club",
      "id" : 123
    }
  }
//-->
</script>

<input type="button" onclick="alert(typeof obj7.test)" value="click">
<input type="button" onclick="alert(obj7.test.name)" value="click">
<input type="button" onclick="alert(obj6.test.id)" value="click">

※ object의 경우 array의 2차원 구조와 형태가 상당히 비슷하므로 주의하도록 하자.