6.3 배열(Array)의 속성(Property)
배열(Array) 객체는 다음과 같이 3개의 속성(Property)를 가지고 있으며 이를 통해 배열의 포함된 요소의 개수를 구하거나 새로운 속성 및 메서드를 추가하여 배열을 확장하여 사용할 수 있습니다.
|
속성 |
설명 |
|
constructor |
배열을 생성하는 함수(function)을 나타냄 |
|
length |
배열에 포함된 요소의 길이, 즉 요소 수를 의미함 |
|
prototype |
배열에 속성(property)나 메서드(Method)를 추가하여 사용 |
메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>배열 속성 예제</title>
<script
type="text/javascript">
var arrMovie = ["건축학개론","도둑들", "토탈리콜"];
document.write("arrMovie 배열의 constructor 속성 : " +
arrMovie.constructor);
document.write("<br
/>"+"arrMovie 배열의 요소수 : " +
arrMovie.length);
</script>
</head>
…
</html>
“arrayProperty.html”으로 저장하고 IE9을 통해 보면 다음과 같이 Array의 constructor, length 속성을 나타냅니다.
결과로 봐서는
배열의 length 속성은 많이 쓸 것 같은데 constructor 속성은
어디에서 사용될까 생각될 수 있는데요. <script>…</script> 블록
부분을 다음과 같이 수정해봅니다.
document.write("<br
/>"+"arrMovie 배열의 요소수 : " +
arrMovie.length);
var Movie2 = new Array("다크 나이트 라이즈", "In good Company");
if ( Movie2.constructor == Array)
document.write("<br />"+
"Movie2는 배열(Array)");
</script>
위와 같이 작성하고 IE9를 이용해서 출력 결과를 확인하면 기존 결과 밑에 “Movie2는 배열(Array)”라고 나타납니다. 이와 같이 변수가 배열(Array)인지 아닌지 체크하고 이에 따른
후속 처리를 하고 싶을 때 constructor 속성을 사용할 수 있습니다.
다음으로 배열에서 prototype 속성에 대해서 설명하면 다음과 같은 형식으로 속성, 메서드를 추가하여 사용할 수 있습니다.
//속성 추가의 경우
array.prototype.속성이름=속성값;
//메서드 추가의 경우
array.prototype.메서드이름=function() {
처리할 코드들;
}
이제 prototype 속성에 대한 예제를 하나 해볼까요? 이번 예제는 prototype 속성을 이용하여 메서드를 추가하는 방법을 소개합니다. 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>배열 속성 예제</title>
<script
type="text/javascript">
var arrMountains = new Array("백두산", "한라산", "지리산", "설악산");
for(var item in arrMountains)
document.write("arrMountains의
데이터 : " + arrMountains[item] + "<br />");
Array.prototype.ShowMe=function(){
for(var idx=0; idx<this.length;
idx++)
document.write("arrMountains["+idx+"]의 데이터 : " +
arrMountains[idx]+"<br />");
}
arrMountains.ShowMe();
</script>
</head>
…
</html>
위에서 ShowMe 라는 메서드를 prototype 속성을 이용하여 추가한 후 ShowMe() 메서드를 호출하는 형태입니다. “arrayPropertywithprototype.html” 으로 저장하고 IE9를 이용하여 연결하면 다음과 같이 arrMountains 배열에 저장되어 있는 모든 아이템을 for문을 이용하여 출력한 후 ShowMe() 메서드를 호출한 결과를 출력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.4.2 pop(), shift() 메서드를 이용한 데이터 삭제 (0) | 2013.08.06 |
|---|---|
| 6.4 배열(Array)의 주요 메서드(Method) (0) | 2013.08.06 |
| 6.2 생성된 배열(array)에 저장된 데이터 접근 및 출력 (0) | 2013.08.06 |
| 6. 배열(Array) (0) | 2013.08.06 |
| 5.2 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅 (2) | 2013.08.06 |
