6.2 생성된 배열(array)에 저장된 데이터 접근 및 출력
여러분이 배열을
생성한 후 생성된 배열에 저장된 각 요소들, 즉 데이터들에 대하여 접근하는 방법은 일반적으로 인덱스
번호를 이용하여 “배열이름[인덱스번호]”의 형태로 접근이 가능합니다.
예를 들어 shoppingItems 배열이 3개
요소(데이터)가 저장되어 있다고 가정합니다.
var shoppingItems = new Array(3);
shoppingItems[0] = “페레가모 안경”;
shoppingItems[1] = “노트북”;
shoppingItems[2] = “DSLR”;
shoppingItems 배열을 이해하기 쉽게 나타내면 다음과 같이 연속적인 리스트 형태로 나타낼 수 있습니다.
위에서 shoppingItems 배열의 “페레가모 안경”에 접근하기 위해서는 “shoppingItems[0]”, “노트북에
접근하려면 “shoppingItems[1]”, 마지막으로 “DSLR”은
“shoppingItems[2]”와 같이
“배열이름[인덱스번호]”의 형태로 접근이 가능합니다. 이렇게 배열에 저장되어 있는 특정 요소(데이터)에 대한 접근 방법은 다른 언어(Java, C#, …)에서와 같이
생각보다 간단합니다.
이제 출력하는 방법에 대해서 알아볼까요? JavaScript에서는 흐름제어에서 설명한 for문, for … in 문이나 배열의 forEach() 메서드를 이용하여 배열에 저장되어 있는 아이템(요소)들을 출력할 수 있도록 지원합니다.
6.2.1 for문을 이용한
출력
흐름제어에서 설명한 다음과 같은 형식의 for문을
이용하여 배열 내에 저장되어 있는 모든 아이템(요소)을 출력할
수 있습니다.
for (초기식 ; 조건식 ; 증감식)
{
실행할 코드들;
}
이번 예제는 앞에서 설명한 new 키워드를 이용한 배열 생성에서 배열의 크기를 이용한 배열의 생성한 후 나중에 생성된 배열에 아이템을 추가하는 형태로 총 아이템수가 5개인 shoppingItems 배열을 이용하여 해당 배열에 저장되어 있는 아이템(요소)들을 출력하는 것입니다. 메모장을 연 후 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
…
<head>
<script
type="text/javascript">
var shoppingItems = new Array(5);
shoppingItems[0] = "페레가모 안경";
shoppingItems[1] = "노트북";
shoppingItems[2] = "DSLR";
shoppingItems[3] = "유럽왕복항공권";
shoppingItems[4] = "마이클 헤머의
리엔지니어링";
for(var idx=0; idx<5; idx++)
document.write("shoppingItems["+idx+"]의 데이터 : " +
shoppingItems[idx]+"<br />");
</script>
</head>
…
</html>
위에서 보는
것처럼 for 문에서 0부터 시작하는 idx라는 변수를 초기화하고 idx가 5보다 작을 때까지 1씩 증가하면서 반복하도록 코드를 작성합니다. “arrayForEx.html”을 저장하고 IE9로 열어보면 다음과
같이 나타납니다.
물론 위 코드에서 배열(Array)의 총 요소수를 나타내는 length 속성을 이용하여 for문의 조건식 부분을 다음과 같이 처리할 수도 있습니다.
for(var idx=0;
idx<shoppingItems.length; idx++)
…
6.2.2 for … in 문을 이용한
출력
흐름제어에서 설명한대로 배열이나 집합 형태의 객체(object)에
대해서 순차적으로 반복하면서 배열이나 집합 형태의 객체에 저장되어 있는 요소(데이터)을 출력할 때 다음과 같은 for … in 문을 사용할 수 있습니다.
for (var 변수 in object)
{
실행할 코드들;
}
메모장을 연
후 다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
…
<head>
<script
type="text/javascript">
var shoppinItems = new Array("페레가모
안경", "노트북",
"DSLR");
for(var item in shoppinItems)
document.write("shoppingItems의 데이터 : " +
shoppinItems[item] + "<br />");
</script>
</head>
…
</html>
“arrayForinEx.html”로 저장하고 IE9로 열어보면 다음과 같이 나타납니다.
6.2.3 forEach() 메서드를 이용한 출력
배열(Array)에서는 정의된 배열의 각 아이템(요소)에 대해서 콜백 함수를 호출하여 각 아이템에 대한 요소값, 인덱스 번호 등을 출력할 수 있도록 다음과 같은 형식의 forEach() 메서드를 제공합니다.
생성한배열객체이름.forEach(callbackfunction [, thisArgs])
먼저 thisArgs 입력 파라미터는 선택적으로 사용할 수 있는 파라미터로 또다른 입력 파라미터인 callbackfunction 콜백 함수 내에 있는 this 값을
나타냅니다.
다음으로 callbackfunction은 다음과 같은 형식으로 정의된 콜백 함수를 의미합니다.
function callbackfunctionName(value,
index, createdarray)
{
처리할 코드들;
}
위에서 value는 배열의 요소값, index는 배열의 인덱스 번호, createdarray는 생성된 배열을 나타냅니다. 이제 예제를
통해 알아볼까요?
사용할 배열은 “var shoppingItems = new Array("페레가모
안경", "노트북",
"DSLR");” 이고 forEach() 메서드는 thisArgs 입력파라미터가
없는 형태를 사용합니다. 메모장을 열어서 다음과 같이 코드를 작성합니다.
<!DOCTYPE
HTML>
…
<head>
<script type="text/javascript">
//콜백 함수 정의
function ShowItem(value, index, ar) {
document.write("요소번호(index): " + index +
" ");
document.write("요소값(value): " + value +
" ");
document.write("<br
/>");
}
var shoppingItems = new Array("페레가모 안경", "노트북", "DSLR");
shoppingItems.forEach(ShowItem);
</script>
</head>
…
</html>
위와 같이 작성한 후 “arrayforEachEx.html”로 저장한 후 IE9로 통해 확인하면 shoppingItems 배열 변수에 저장되어
있는 정보들을 다음과 같이 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6.4 배열(Array)의 주요 메서드(Method) (0) | 2013.08.06 |
|---|---|
| 6.3 배열(Array)의 속성(Property) (2) | 2013.08.06 |
| 6. 배열(Array) (0) | 2013.08.06 |
| 5.2 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅 (2) | 2013.08.06 |
| 5.1.3 object 표기방법인 {}을 이용한 객체 생성 (2) | 2013.08.06 |