본문 바로가기
제가 쓴 책/HTML5, CSS3 and JavaScript

6. 배열(Array)

by edupicker(체르니) 2013. 8. 6.

6. 배열(Array)



배열(array)은 다수의 데이터를 저장하는데 유용한 객체(object)의 한 유형으로 하나의 변수를 선언하면서 다수의 데이터를 집합의 형태로 저장하여 사용하는데 유용합니다. 그리고 이렇게 배열의 형태로 저장되는 각 데이터들을 배열의 요소(Element) 혹은 항목(Item)이라고 부릅니다.
예를 들어 여러분이 쇼핑몰에서 페레가모 안경”, “노트북”, “DSLR”같은 상품들을 구매하기로 한 쇼핑 목록입니다. 이에 대한 데이터를 변수를 선언하여 저장한다면 다음과 같이 나타낼 수 있습니다.


var stringValue1 = ”페레가모 안경”;
var stringValue2 = ”
노트북”;
var stringValue3 = ”DSLR”;

위와 같이 변수 3개를 선언하여 각각 데이터를 넣어주어야 하는데 배열을 이용할 경우는 다음과 같이 하나의 변수를 선언하여 3개이 제품들을 저장할 수 있습니다.

var shoppinItems = new Array(“
페레가모 안경”, “노트북”, “DSLR”);

위와 같이 배열은 다수의 쇼핑한 제품 항목들을 하나의 변수(shoppinItems)에 저장하고자 할 때 유용하게 사용할 수 있으며 이렇게 선언된 배열은 일반적으로 배열의 인덱스(index) 번호를 이용하여 각각 접근이 가능합니다. 이제 배열의 생성부터 알아볼까요?


6.1 배열(array)의 생성

일반적으로 배열의 생성은 주로 3가지 형태가 가능한데 첫 번째는 new 키워드를 이용하여 배열을 선언하면서 배열의 몇 개의 아이템(요소)이 들어갈 것인가를 정의하고 나중에 생성된 배열에 실제 데이터를 추가하는 형태가 있습니다.
다음으로 new 키워드를 이용하여 배열을 선언하면서 실제 선언되는 배열에 저장되는 아이템(요소)을 명시하여 생성하는 형태가 있습니다. 그리고 마지막으로 배열의 literal syntax []을 이용하여 생성하는 형태가 가능합니다.

그럼 먼저 배열의 크기를 미리 정의하여 나중에 필요할 때 배열의 각 아이템들을 추가하는 형태의 배열 생성에 대해서 보면 다음과 같은 형식을 사용합니다.


var 생성할배열이름 = new Array(배열의 크기);


위에서 배열의 크기는 생성할 배열에 총 몇 개의 아이템(요소)이 추가될 것인가를 명시하는 것으로 정수형의 형태로 나타냅니다. 예를 들어 생성할 배열에 들어갈 총 아이템(요소)수가 5개이면 “new Array(5);” 같이 명시해주면 되며 데이터 저장은 다음과 같은 형식을 사용합니다.

생성된배열이름[인덱스번호] = 아이템(요소);


그래서 데이터를 모두 저장하면 다음과 같이 처리할 수 있습니다.

var shoppingItems = new Array(5);
shoppingItems[0] = “
페레가모 안경”;
shoppingItems[1] = “
노트북”;
shoppingItems[2] = “DSLR”;
shoppingItems[3] = “
유럽왕복항공권”;
shoppingItems[4] = “
마이클 헤머의 리엔지니어링”;

위에서 반드시 알아둬야 할 것은 배열의 인덱스 번호는 1이 아닌 0부터 시작한다는 점입니다. 그래서 총 5개의 아이템(요소)이 저장될 수 있는 shoppingItems 변수에는 인덱스 번호가 0부터 시작해서 4까지 5개의 아이템이 저장할 수 있습니다.

다음으로 배열을 선언하면서 실제 선언되는 배열에 저장되는 아이템(요소)을 직접 명시하는 형태의 배열 사용방법은 다음과 같습니다.


var 생성할배열이름 = new Array(“항목1”, “항목2”, …);


예를 들어 앞에서 사용한 “var shoppinItems = new Array(“페레가모 안경”, “노트북”, “DSLR”);”가 바로 선언되는 배열에 저장되는 아이템(요소)을 직접 명시하는 형태이며 실제로 shoppinItems 변수에는 다음과 같이 아이템(요소)들이 저장되게 됩니다.

shoppingItems[0] = “
페레가모 안경”;
shoppingItems[1] = “
노트북”;
shoppingItems[2] = “DSLR”;

마지막으로 배열을 나타내는 기호 형식인 []을 이용하여 생성하는 형태는 다음과 같습니다.


var 생성할배열이름 = [항목1, 항목2, … ];


위와 같은 형식은 가장 간단하게 배열(Array)을 생성하는 방법으로 배열에 포함될 모든 요소(Element) 혹은 아이템(항목)과 함께 배열을 생성합니다.
예를 들어 앞에서 사용한 “var shoppinItems = [“페레가모 안경”, “노트북”, “DSLR”];” 와 같이 간단하게 생성할 수 있습니다.




- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.