Chapter 07. 배열 변수

1. 개요

배열은 선언된 변수에 ‘동일한 타입의 데이터가 다수 담긴 상태’를 말한다.

일반적으로 유사한 데이터가 담기기 때문에 변수 명은 동일하지만, 데이터 사이에 구분을 위해 ‘인덱스’를 부여하고 이를 구별한다. 

 

2. 배열의 생성과 참조

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

 

배열을 생성하는 방법은 총 3가지로, 배열 변수명과 배열 요소를 정렬하여 선언한다.

사용 방법은 다양하지만 동작은 같다. 기본적으로 위와 같이 생성된 데이터는 아래와 같이 접근이 가능하다. 

 

var arr = [“배열”, 3, true];

 

arr[0]은 배열이라는 문자열이 담겨있고, arr[1]에는 3이라는 숫자가 담겨있다.

스크립트 언어는 변수를 선언할 때, 데이터 타입을 지정하지 않기 때문에 배열의 값 또한 데이터 타입에 제한을 받지 않는다.

결과적으로 다양한 데이터 타입을 담고 실행이 가능하다.

또한 null 값을 할당할 수 있다. (이는 Object 타입의 데이터와 후에 다룰 context에서 굉장히 중요한 위치를 가진다.)

 

3. 배열 요소의 추가

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

 

배열에 새로운 데이터를 더 추가하고 싶다면 위의 방법을 통해 추가가 가능하다.

push 메소드 혹은 length 프로퍼티를 이용한 방법은 배열의 제일 마지막에 새로운 요소를 추가하는 것이다. 

3번을 이용하여 값을 할당하거나 추가할 경우, 각 인덱스 사이에 ‘구멍(hole)’이 생길 수 있다.

이 경우 default 값은 undefined로 취급된다.

 

4. 희소 배열

 

var arr = new Array(); // 빈 배열 객체를 생성함.
arr[99] = "JavaScript" // 배열 arr의 100번째 위치에 문자열을 삽입함.
// 100번째 요소를 삽입했기 때문에 배열의 길이는 100으로 늘어남.
document.write("배열의 길이는 " + arr.length + "입니다.");

 

희소 배열은 배열에 속한 요소가 ‘연속적이지 않은 배열’을 말한다.

배열의 값이 연속적이지 않게 할당되지만 중간중간에 생길 수 있는 hole이 존재한다.

다만 배열의 할당 index는 배열 요소의 데이터가 있는 가장 큰 숫자가 존재하므로 length가 배열요소의 데이터보다 작다. 

 

5. 다차원 배열

다차원 배열은 배열 안에 배열이 담긴 형태를 말한다.

쉽게 말해 ‘표’를 생각하면되는데 표에 따라 데이터가 다르게 할당되는 것과 같다.

다차수는 하위 차수의 배열 데이터를 담는다. 

 

2차원 배열	a[0][0]	a[0][1]	a[0][2]
a[0][0]	1	2	3
a[1][0]	4	5	6
a[2][0]	7	8	9

 

6. 연관 배열 (associative array)

자바스크립트에서 배열의 인덱스는 0을 포함한 양의 정수만 사용이 가능하다.

이렇게 숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열이라고 한다.

일부 프로그래밍 언어가 지원하는 연관 배열을 자바스크립트는 별도로 제공하지는 않는다.

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

다만, 이렇게 생성된 배열은 자바스크립트 내부적으로 기존 객체에서 기본 객체로 재선언된다.

이에 따라 기존에 사용할 수 있었던 모든 Array 메소드와 값이 정확하지 않은 결과값을 반환하게 된다. 

 

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

 

예제 처럼 연관 배열인 arr은 length 가 0으로 반환된다.

자바스크립트의 연관 배열은 array 객체가 아닌 기본 객체이므로 엄밀하게 말해 ‘배열’이 아닌 것이다.

ECMAScript 6부터 이러한 불편함을 해결하기 위해 새로운 데이터 구조인 Map 객체를 별도로 제공한다. 

 

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

 자바스크립트에서 문자열은 변하지 않는 값이기 때문에, 일기 전용 배열로 다룰 수 있다.

배열 처럼 [] 연산자를 통해 문자열을 구성하는 각 문자에 바로 접근이 가능하다. 

 

var str = "안녕하세요!";       // 문자열 생성
document.write(str.charAt(2)); // 하 
document.write(str[2]);   // 하


var str = "안녕하세요!"; // 문자열 생성
str[0] = "";             // 자바스크립트의 문자열은 읽기 전용이므로, 이 문장은 오류를 발생시킵니다.

 

 

주의할 것은 읽기 전용이므로 배열로 접근하여 데이터를 수정할 수 없다는 점이다.

만약 배열처럼 사용하고 싶다면 split() 메소드를 이용해 배열로 변환하고 사용할 필요가 있다. (이는 String 관련 메소드이다.)

 

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

 배열의 데이터 타입은 Object로 실제 Object란 타입과 구별됨에도 유사하게 표기된다. 이에따라 개발자는 해당 데이터가 진짜로 배열인지 확인할 필요가 있다. 이런 경우, 다음 방법 중 1개를 사용할 수 있다. 

 

1) Array.isArray() 메소드
2) instanceof 연산자
3) constructor 프로퍼티

 

 

다만 1번 항목은 ECMAScript 5 이후로 지원되기 때문에 instanceof를 사용하는 것이 일반적이다. 

 

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


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


function Array() {[native code]}
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