이번 강좌(?)에서는 JSON의 데이터형과 해당 동작내용을 알아보도록 하자.
이전강좌 : [강좌] Json(JavaScript Notation) 입문 #1
3. JSON의 데이터 타입(자료형)
JSON의 데이터 타입은 다음과 같다.
- string
- number
- boolean
- null
- array
- object
- 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">
<!--
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">
<!--
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">
<!--
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">
<!--
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">
<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차원 구조와 형태가 상당히 비슷하므로 주의하도록 하자.<!--
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">
이번회에서는 JSON에서 사용가능한(?) 데이터 자료형에 대해서 알아보았다.
다음번 강좌(?)에서는 JSON을 실제 응용하는 사례를 들어 설명하도록 하겠다.