[TCP School/자바스크립트] 배열

자바스크립트에서 배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다.

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.

 

자바스크립트에서 배열의 특징은 다음과 같다.

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

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

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

---

배열의 생성

자바스크립트에서 배열을 만드는 방법은 다음과 같다.

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

---

배열의 참조

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

 

자바스크립트에서 배열 요소의 개수를 배열의 길이라고 한다.

이러한 배열의 길이는 배열의 length 프로퍼티에 자동으로 갱신된다.

 

자바스크립트에서 배열의 인덱스는 항상 0부터 시작한다.

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

이러한 인덱스는 2^32보다 작은 양수만을 사용할 수 있다.

var arr = ['JavaScript'];
var element = arr[0];

arr[1] = 10;
arr[2] = element;

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

delete arr[2];  // 배열의 세 번째 요소를 삭제. 하지만 길이는 변함 없음
document.write('배열 arr의 요소에는 [' + arr + ']가 있습니다.<br>');
document.write('배열 arr의 길이는 ' + arr.length + '입니다.'<br>);

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

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

---

배열 요소의 추가

자바스크립트에서 배열에 새로운 배열 요소를 추가하는 방법은 다음과 같다.

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

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 마지막에 요소를 추가한다.

 

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

arr.push('Script');
document.write(arr + '<br>');  // 1,true,'Java','Script'

arr[arr.length] = 100;
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 값을 반환하게 된다.

---

희소 배열

희소 배열이란 배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미한다.

따라서 희소 배열의 경우 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적다.

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

---

다차원 배열

다차원 배열이란 배열 요소가 또 다른 배열인 배열을 의미한다.

var arr = new Array(3);
for (var row = 0; row <= 3; row++) {
     arr[row] = new Array(4);
     for (var col = 0; col <= 4; col++) {
         arr[row][col] = '[' + row + ',' + col + ']';
         document.write(arr[row][col] + '');
     }
}

위 예제는 2차원 배열을 만드는 예제이다.

---

연관 배열

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

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

 

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

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

 

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

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

var arr = [];
arr['하나'] = 1;
arr['참'] = true;
arr['자바스크립트'] = 'JavaScript';

document.write(arr['참']);
document.write(arr.length);  // 연관 배열은 Array 객체가 아니므로 length 프로퍼티의 값이 0임
document.write(arr[0]);  // undefined

연관 배열은 정확히 말하면 Array 객체가 아닌 기본 객체이므로 배열이 아니다.

 

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

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

Map - JavaScript | MDN

---

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

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

 

따라서 배열처럼 [] 연산자를 사용하여 문자열을 구성하는 각 문자에 바로 접근할 수 있다.

또한, Array 객체가 제공하는 모든 범용 메소드도 사용할 수 있다.

문자열의 각 문자는 String 객체에서 제공하는 charAt() 메소드를 사용해도 접근할 수 있다.

var str = '안녕하세요';
document.write(str.charAt(2));  // 하
document.write(srt[2]);  // 하

 

하지만 이렇게 문자열을 배열처럼 접근하는 방법은 인터넷 익스플로러 7과 그 이전 버전에서는 동작하지 않는다.

따라서 문자열을 바로 배열처럼 사용하지 말고, split() 메소드 등을 이용해 먼저 배열로 변환한 후 사용하는 것이 좋다.

---

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

자바스크립트에서는 배열이라는 타입(type)을 별도로 제공하지 않는다.

자바스크립트 배열은 객체(object) 타입이 되며, typeof 연산자를 사용하면 'object'를 반환한다.

 

따라서 자바스크립트에서는 해당 변수가 배열인지 여부를 확인할 수 있도록 다음과 같은 방법을 제공하고 있다.

1. Array.isArray() 메소드

2. instanceof 연산자

3. constructor 프로퍼티

 

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

ECMAScript 5부터 Array 클래스에 isArray()라는 배열 여부를 확인할 수 있는 메소드가 추가되었다.

하지만 구형 브라우저에서는 ECMAScript 5를 지원하지 않으므로, Array.isArray() 메소드가 정상적으로 동작하지 않을 수 있다.

따라서 이 때는 instanceof 연산자를 사용해서 해당 변수가 Array 객체인지를 판단하여 배열 여부를 확인할 수 있다.

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

또한, Array 객체의 constructor 프로퍼티를 사용하여 배열 여부를 확인할 수도 있다.

자바스크립트 배열에 대해 constructor 프로퍼티는 다음과 같은 값을 반환한다.

function Array() {[native code]}

 

따라서 다음 예제와 같이 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'));  // 9

document.wrtie(isArray(arr));  // true

indexOf() 메소드는 인수로 전달받은 문자열을 해당 문자열에서 찾지 못하면 언제나 -1을 반환한다.

---

TCP School의 강의 내용을 정리한 포스트입니다.

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

코딩교육 티씨피스쿨