[JavaScript] 자바스크립트 배열(array) : 생성 및 활용

 

 

배열 (array)

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

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

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

 

 

 

자바스크립트에서 배열 특징

1. Array 객체로 다룬다

2. 배열 요소의 타입이 고정되어 있지 않아, 같은 배열에 있는 요소들끼리 타입이 서로 다를 수 있다

3. 인덱스가 연속적이지 않아도 되며, 특정 요소가 비어있을 수도 있다

 

 

 

 

---

배열의 사용

 

배열의 생성

- 문법

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

 

 

 

배열의 인덱스

- 자바스크립트에서 인덱스는 언제나 0부터 시작한다

- 인덱스에는 2^32보다 작은 양수만 사용가능

- 배열의 길이 : length 프로퍼티에 자동으로 갱신된다

- 홀 (hole) : 인덱스에 대응하는 배열 요소가 없는 부분. undefined 값을 가지는 요소처럼 취급한다

 

 

 

배열의 참조

- 배열의 요소를 참조할 때는 [] 연산자를 사용한다

- 문법

배열이름[인덱스]

- 현재 배열의 길이보다 큰 인덱스에 요소를 저장하는 것도 가능하다

  배열의 길이가 자동으로 해당 인덱스까지 늘어난다.

 

 

 

배열 요소의 추가

- 문법

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

- push() 메소드를 사용하면 배열의 제일 끝에 요소를 추가한다

 

 

 

 

 

---

배열의 활용

 

 

희소 배열

: 배열에 속한 요소의 위치가 연속적이지 않은 배열

- length 프로퍼티 값보다 배열 요소 개수가 항상 적다

 

 

 

다차원 배열

: 배열의 요소가 또 다른 배열인 배열

- (예) 2차원 배열 생성

var arr = new Array(3);      // 3개의 요소를 가지는 배열을 생성함.
for (var row = 0; row < 3; row++) {
    arr[row] = new Array(4); // 각각의 요소마다 또다시 4개의 요소를 가지는 배열을 생성함.
    }
}

 

 

 

연관 배열 (associative array)

: 숫자로 된 인덱스 대신 문자열로 된 키(key)로 사용되는 배열

- 자바스크립트에서 연관 배열을 별도로 제공하지 않는다

- 대신 인덱스로 문자열을 사용하여 연관 배열처럼 사용할 수 있는 객체(object)를 만들 수 있다

- 이러한 배열은 JS 내부적으로 Array 객체에서 기본 객체로 재선언되기 때문에, 기존 사용했던 모든 Array 메소드와 프로퍼티가 정확하지 않은 결과값을 반환한다

- ECMAScript 6부터는 이러한 불편함을 해결하는 새로운 데이터 구조 Map 객체를 제공한다

- (예) 연관 배열

var arr = [];     // 비어있는 배열을 생성함.
arr["하나"] = 1;  // 숫자 인덱스 대신에 문자열을 인덱스로 배열 요소를 추가함.
arr["참"] = true;
arr["자바스크립트"] = "JavaScript";
document.write(arr["참"]);  // 문자열을 인덱스로 배열 요소에 접근할 수 있음.
document.write(arr.length); // 연관 배열은 Array 객체가 아니므로 length 프로퍼티의 값이 0임.
document.write(arr[0]);     // undefined

 

 

 

문자열을 배열처럼 접근하기

- JS에서 문자열은 변하지 않는 값으로, 읽기 전용 배열로 다룰 수 있다

- [] 연산자로 문자열을 구성하는 각 문자에 접근할 수 있고, Array 객체가 제공하는 메소드도 사용 가능하다

- 각 문자는 String 객체에서 제공하는 charAt() 메소드를 사용하여 접근하는 것도 가능하다

 

 

 

자바스크립트에서 배열 여부 확인

- JS에서는 배열은 별도의 타입이 없이 객체(object) 타입이 되므로 typeof를 통해 확인할 수 없다

var arr = [1, true, "JavaScript"]; // 배열 생성
document.write(typeof arr);        // object

- 따라서 다음과 같은 방법을 통해 배열 여부를 확인해야 한다

 

 

1. Array.isArray() 메소드

document.write(Array.isArray(arr));      // true
document.write(Array.isArray("문자열")); // false

 

2. instanceof 연산자

document.write(arr instanceof Array); // true
document.write(123 instanceof Array); // false

 

3. constructor 프로퍼티

- Array 객체의 constructor 프로퍼티를 사용하여 배열 여부 확인

- constructor 속성 : 어떤 생성자 객체를 통해 생겨난 instance인지를 알려주는 역할을 한다

- (예) toString(), indexOf() 메소드를 함께 사용하여 해당 변수의 배열 여부를 확인하는 예제

function isArray(a) {
    return a.constructor.toString().indexOf("Array") > -1;
}
 
var arr = [1, true, "JavaScript"];          // 배열 생성
document.write(arr.constructor);            // constructor 프로퍼티의 값 출력
document.write(arr.constructor.toString()); // function Array() {[native code]}
document.write(arr.constructor.toString().indexOf("Array")); // 10
document.write(isArray(arr))                // true

 

 

 

 

 

 

 

 

[참고자료] http://tcpschool.com/javascript/intro