5.2 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅
생성된 객체의
속성에 접근하는 방법은 앞에서 설명한 것처럼 도트( . )를 이용하여 “객체이름.속성이름”의 형태로
접근할 수도 있지만 대괄호를 이용하여 생성된 객체의 속성에 접근이 가능합니다.
예를 들어 다음과 book 객체가 생성되어 있다고 가정하고 각각의 접근 방법을 나타내면
다음과 같습니다.
var book = {title:"부의 미래", author:"앨빈 토플러"};
//도트(.)를 이용할 경우
var d_title =book.title;
var d_author=book.author;
//대괄호(square bracket)를 사용할 경우
var s_title=book[“title”]
var s_author=book[“author”];
즉, “객체이름[“속성이름”]” 형태로
접근이 가능함을 의미합니다. 일반적으로 도트( . )를 이용한
속성 접근은 Java, C# 같은 언어에서 클래스(class)의
정적 필드(Field) 접근에 사용되고 방금 설명한 대괄호를 이용한 속성 접근 방법은 보통의 배열(Array)과 하나의 속성이 키(key) 역할을 해서 이 속성이 하나의
값(value)과 연관되는 형태인 연관 배열(Associative
Array) 형태에 적용됩니다.
그러므로 잘 알아두는 것이 좋겠죠? 예제를 하나 해볼까요?
메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>대괄호에 속성 접근 예제</title>
<script
type="text/javascript">
var book = {title:"부의 미래", author:"앨빈 토플러"};
document.write("book
제목 : "+
book["title"]+ " 저자 : " +
book["author"]);
</script>
</head>
<body>
</body>
</html>
“bracketaccessEx.html”으로 저장합니다. IE9를 이용하여 확인하면 다음과
같이 도트( . )를 이용한 속성 접근 예제와 동일한 결과를 나타냅니다.
이제 조금 바꿔볼까요? <script> … </script> 블록 내부의 모든 코드를 주석문(/* */)을 이용하여 주석 처리하고 다음과 같이 코드를 추가해봅니다.
<script
type="text/javascript">
/* var book = {title:"부의 미래", author:"앨빈
토플러"};
document.write("book 제목 : "+ book["title"]+ " 저자 : " + book["author"]); */
var student = new Object();
student["student_number"] =
"20090917";
student["name"] = "홍길동";
student["phone_number"] =
"010-9292-5353";
for( var data in student)
document.write(student[data]+"\t");
</script>
위에서 student 객체를 생성하고 대괄호를 이용하여 생성된 객체의 속성과 속성값을 설정할 수 있습니다. 그리고 student 객체에 저장되어 있는 데이터를 출력하기 위해서 for .. in 문을 이용하여 나타내면 다음과 같이 student 객체에 저장되어 있던 속성값들을 출력합니다.
간단하게 IE9에서 IE Developer Tools를 이용하여 데이터 흐름을 추적(trace)해볼까요? 위와 같이 작성한 코드를 저장하고 IE9 브라우저를 실행한 후 F12를 누르거나 다음과 같이 브라우저 우측 상단을 클릭하여 개발자 도구(L)을 실행합니다.
그러면 다음과 같이 개발자 도구가 나타나는데 여기서 스크립트 부분을 클릭합니다.
그러면 다음과 같이 화면이 바뀝니다.
이제 IE9 URL창에 다음과 같이 입력하여 웹서버에 연결합니다.
그러면 student 객체에 저장되어 있던 속성값들을 IE9 화면에 출력하고 열어논 개발자 도구에 변화가 다음과 같이 발생합니다.
이제 위 그림에서 14라고 써있는 부분을 마우스로 클릭하여 for … in문에 중단점을
설정합니다. 그 다음 조사식을 클릭하여 다음과 같이 student, data를
입력합니다.
그러면 위와 같이 이미 웹서버로부터 다운로드받아서 모든 처리가 끝났으므로 조사식에 student 객체의 name, phone-number, student_number 값과 함께 for … in 문 안에서 사용된 변수인 data가 마지막 속성값을 나타냅니다. 이 상태에서 처리 과정을 확인하기 위해서 디버깅 시작 버튼을 클릭합니다.
그러면 위와
같이 디버깅이 시작되며 현재 for … in문 라인에서 중단점(breakpoint)가
설정되었으므로 for … in 안에서 사용된 data는 설정되어
있지 않으므로 “Undefined”로 나타납니다. 이제 F11을 누르면 조사식에 data는 값으로 “student_number” 유형은 String으로 변경되어 나타납니다.
계속 해서 F11을 누르면 조사식에 data가
각각 “name”, “phone_number”로 변경되어 나타나고 마지막 속성인 “phone_number”에 대하여 처리하고 for … in문을 반복하면서
해당 속성들에 대한 속성값들을 출력합니다.
이상으로 대괄호를 이용하여 객체 속성에 접근하는 방법을 설명하면서 IE9에서 제공하는 개발자
도구를 이용하여 간단하게 JavaScript 코드 디버깅 방법을 설명했는데 Firefox에는 Firebug, Chrome에서는 우측 상단의 Chrome 설정 및 관리에서 도구-개발자 도구 등을 이용해서 디버깅이
가능하고 Safari에는 Web Inspector나 Firebug Lite 등을 이용하여 디버깅이 가능합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.2 생성된 배열(array)에 저장된 데이터 접근 및 출력 (0) | 2013.08.06 |
|---|---|
| 6. 배열(Array) (0) | 2013.08.06 |
| 5.1.3 object 표기방법인 {}을 이용한 객체 생성 (2) | 2013.08.06 |
| 5.1.2 생성자 함수(constructor function)를 이용하여 객체 정의하고 생성하기 (0) | 2013.08.06 |
| 5. 객체(Object) (0) | 2013.08.06 |
