6.6 해쉬 테이블(HashTable)
객체(object) 중 순서가 정해지지 않은 속성들의 집합으로 구성된 객체(object)는
속성이름과 속성값으로 구성되어 있습니다. 그리고 속성이름이 문자열(string)일
경우 보통 해당 객체는 문자열이 값(value)에 매핑되었다고 말합니다. 그리고 이렇게 문자열이 값(value)에 매핑된 형태를 해쉬(Hash) 혹은 해쉬 테이블(Hashtable) 또는 연관 배열(Associative Array)라고 부릅니다.
그래서 이러한 형태의 객체(object)를 생성하면 생성된 객체의 속성(property)이 하나의 키(key) 역할을 하게 되고 됩니다.
해쉬 테이블을 만드는 방법은 다양한데 여기서는 Object, Array를 이용한 HashTable 생성 방법과 출력에 대해서 소개합니다.
먼저 Object를 이용할 경우를 보면 다음과 같은 hash
객체를 생성하고 생성된 hash 객체에 키(key) 역할을
하는 속성에 대응하는 값(value)으로 속성값을 설정하여 hashtable을
만들거나 {}을 이용하여 생성할 수도 있습니다.
//Object를 이용할 경우
var hash = new Object();
hash.속성1=속성값1;
hash.속성2=속성값2;
…
혹은 {} 을
이용하여 생성할 경우
var hash = {속성1:속성값1, 속성2:속성값2, … };
이렇게 생성된 hash 객체에 대해서 해당 hash 객체에 저장되어 있는 요소(Element)를 출력하는 방법은 for … in 문을 이용하여 출력할
수 있습니다. 예제를 하나 해봅니다. 메모장을 열어서 다음과
같이 코드를 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>Object를 이용한 hashTable 예제</title>
<script
type="text/javascript">
var hash_book = new Object();
hash_book.title="국화와 칼";
hash_book.author="루스 베네딕트";
hash_book.pages=253;
for(key in hash_book)
document.write("key:
"+key+" value:"+hash_book[key]+"<br />");
</script>
…
</html>
hash_book 해쉬 객체를 생성하고 속성을 설정하는 방법은 일반 Object 객체를
생성하고 속성을 추가하는 방법과 동일합니다. 차이가 나는 부분은
for … in 문에서 key 부분입니다.
“hashtablebyObject.html”로 저장하고 IE9로 연결하여 보면 다음과 같이 key, value 쌍의 형태로
나타납니다.
위 코드에서 hash_book 해쉬 객체를 생성하고 속성을 설정하는 부분을 {}을
이용하여 다음과 같이 설정해주고 실행해도 위와 동일한 결과를 나타냅니다.
다음으로 배열(Array)를 이용한 생성은 배열을 생성하고 다음과 같이 인덱스 번호 대신
“key”로 사용될 속성이름”과 value값으로 사용될 속성값을 설정합니다.
//Array를 이용할 경우
var hash = new Array();
hash[“key로 사용될 속성1”]=속성값1;
hash[“key로 사용될 속성2”]=속성값2;
…
방금 전 사용한 “hashtablebyObject.html”을 메모장으로 열고 기존의 <script> … </script> 블록 내의 모든 코드를 주석 처리(/* */)합니다. 그 다음 그 안에 다음의 코드를 작성합니다.
<script
type="text/javascript">
var shoppingItems = new Array();
shoppingItems["안경"] = "페레가모 안경";
shoppingItems["노트북"] = "LG 노트북";
shoppingItems["스마트폰"] = "아이폰";
shoppingItems["항공권"] = "유럽왕복항공권";
shoppingItems["책"] = "마이클 헤머의 리엔지니어링";
for(key in shoppingItems)
document.write("key:
"+key+" value:"+shoppingItems[key]+"<br
/>");
</script>
다른 이름으로 저장을 선택하여 “”로 저장하고 IE9를
통해 연결하여 보면 다음과 같이 key, value 쌍으로 그 결과를 출력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 7.1.1 window와 관련된 이벤트 핸들러 속성 (0) | 2013.08.06 |
|---|---|
| 7. 이벤트(Event)와 이벤트 핸들러(EventHandler) (0) | 2013.08.06 |
| 6.5 이차원 배열 (0) | 2013.08.06 |
| 6.4.4 join(), toString() 메서드를 이용한 배열을 문자열로 바꾸기 (0) | 2013.08.06 |
| 6.4.3 slice(), splice() 메서드를 이용한 데이터 추출 (4) | 2013.08.06 |
