배열의 기초

배열(array)이란?

이름과 인덱스로 참조되는 정렬된 값의 집합

배열 요소(element) - 배열을 구성하는 각각의 값

인덱스(index) - 배열에서의 위치를 가리키는 숫자

 

특징

1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있음

2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있음

3. 자바스크립트에서 배열은 Array 객체로 다뤄짐

---

배열의 생성

문법

1. var arr = [배열요소1, 배열요소2,...];          // 배열 리터럴을 이용하는 방법
2. var arr = Array(배열요소1, 배열요소2,...);     // Array 객체의 생성자를 이용하는 방법
3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

  

배열 리터럴 - 대괄호([]) 안에 배열 요소를 쉼표로 구분하여 나열

 

예제

var arrLit = [1, true, "JavaScript"];             // 배열 리터럴을 이용하는 방법
var arrObj = Array(1, true, "JavaScript");        // Array 객체의 생성자를 이용하는 방법
var arrNewObj = new Array(1, true, "JavaScript"); // new 연산자를 이용한 Array 객체 생성 방법

document.write(arrLit + "<br>");                  // 1,true,JavaScript
document.write(arrObj + "<br>");                  // 1,true,JavaScript 
document.write(arrNewObj);                        // 1,true,JavaScript

 

코딩연습 ▶

---

배열의 참조

[ ] 연산자 - 자바스크립트에서 배열의 각 요소를 참조하고 싶을 때 사용

문법

배열이름[인덱스]

배열의 길이

자바스크립트에서는 배열 요소의 개수

length 프로퍼티에 자동으로 갱신됨

 

인덱스

언제나 0부터 시작

음이 아닌 정수를 반환하는 임의의 표현식도 사용할 수 있음

232보다 작은 양수만을 사용할 수 있음

 

예제

배열을 생성하고, 생성된 배열에 요소를 추가하고 삭제

var arr = ["JavaScript"]; // 요소가 하나뿐인 배열을 생성함.
var element = arr[0];     // 배열의 첫 번째 요소를 읽어서 대입함.

arr[1] = 10;      // 배열의 두 번째 요소에 숫자 10을 대입함. 배열의 길이는 1에서 2로 늘어남.
arr[2] = element; // 배열의 세 번째 요소에 변수 element의 값을 대입함. 배열의 길이는 2에서 3으로 늘어남.


document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다.<br>");   // 배열의 길이를 출력함.

delete arr[2];    // 배열의 세 번째 요소를 삭제함. 하지만 배열의 길이는 변하지 않음.

document.write("배열 arr의 요소에는 [" + arr + "]가 있습니다.<br>"); // 배열의 요소를 모두 출력함.
document.write("배열 arr의 길이는 " + arr.length + "입니다.");       // 배열의 길이를 출력함.


/*
결과 값

배열 arr의 요소에는 [JavaScript,10,JavaScript]가 있습니다.
배열 arr의 길이는 3입니다.
배열 arr의 요소에는 [JavaScript,10,]가 있습니다.
배열 arr의 길이는 3입니다.
*/

코딩연습 ▶

세 번째 실행문은 배열의 현재 길이보다 더 큰 인덱스에 요소를 저장하려고 한다.

자바스크립트에서는 이렇게 배열의 길이를 넘는 인덱스에 요소를 저장하는 것을 허용

이때 배열의 길이는 자동으로 해당 인덱스까지 늘어나게 된다.

---

배열 요소의 추가

문법

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가

 

예제

var arr = [1, true, "Java"];

arr.push("Script");           // push() 메소드를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script

arr[arr.length] = 100;        // length 프로퍼티를 이용하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100

arr[10] = "자바스크립트";     // 특정 인덱스를 지정하여 추가하는 방법
document.write(arr + "<br>"); // 1,true,Java,Script,100,,,,,,자바스크립트
document.write(arr[7]);       // undefined

코딩연습 ▶

위의 예제에서 배열 arr의 길이는 최종적으로 11

이때 배열 요소가 존재하는 인덱스는 0, 1, 2, 3, 4, 10

나머지 인덱스에는 배열 요소가 존재하지 않음

 

배열의 홀(hole)

인덱스에 대응하는 배열 요소가 없는 부분

undefined 값을 가지는 요소처럼 취급

undefined 값을 반환

---

배열의 순회(iteration)

배열의 모든 요소에 차례대로 접근하고 싶을 때, for 문과 같은 반복문을 사용하여 접근

예제

var arr = [1, true, "JavaScript"];

var result = "<table><tr>";
for (var idx in arr) {
    result += "<td>" + arr[idx] + "</td>";
}
result += "</tr></table>";

document.write(result);

---

배열의 순회

---

 코딩연습 ▶

---

Array 객체

배열(array)

정렬된 값들의 집합으로 정의

Array 객체로 다뤄짐

 

자바스크립트는 사용자가 배열과 관련된 작업을 손쉽게 할 수 있도록 다양한 메소드도 제공

 

예제

배열과 각 배열 요소의 typeof 연산 결과

var arr = new Array(10, "문자열", false);

document.write((typeof arr) + "<br>");    // object
document.write((typeof arr[0]) + "<br>"); // number
document.write((typeof arr[1]) + "<br>"); // string
document.write(typeof arr[2]);            // boolean

코딩연습 ▶

자바스크립트 Array 객체에 대한 더 자세한 사항은 자바스크립트 Array 객체 수업에서 확인

자바스크립트 Array 객체 수업 확인 =>

---

참고

http://www.tcpschool.com/javascript/js_array_basic

코딩교육 티씨피스쿨