자바스크립트 완벽가이드 - 7.6 배열 원소 읽고 쓰기

배열의 각 원소에 접근할 때에는 [] 연산자를 사용한다. [] 연산자의 좌측에는 배열에 대한 참조가

위치하여야 하며, [와 ] 사이에는 음수가 아닌 정수 값으로 평가되는 임의의 표현식이 위치할 수 있다.

 

이 구문은 배열에서 원소를 읽거나 쓸 때 사용할 수 있다.

다음의 자바스크립트 문장들은 모두 적법한 표현이다.

value = a[0];
a[1] = 3.14;
i = 2;
a[i] = 3;
a[i+1] = "hello";
a[a[i]] = a[0];

배열의 인덱스가 1번부터 시작하는 프로그래밍 언어들도 있으나

자바스크립트, C, C++, 자바의 배열은 0번 인덱스부터 첫 번째 원소가 시작한다.

이미 앞에서 살펴본 바와 같이 [] 연산자는 객체의 이름 붙은 프로퍼티에 접근하려 할 때에도 사용할 수 있다.

my['salary'] *= 2;

또한 배열은 객체의 특별한 종류이기때문에 또는 [] 구문을 사용하여 배열 안에 숫자가 아닌 이름의

객체 프로퍼티를 정의하고 접근할 수 있다.

배열의 인덱스에는 반드이 0보다 크거나 같고 2³²-1보다 작은 정수를 사용해야만 한다.

만약 너무 큰 수나 음의 정수, 부동소수점 값, 불리언 값과 객체 같은 다른 값을 인덱스로 사용하려면

자바스크립트는 이를 문자열로 변환하고 이 문자열을 객체의 프로퍼티 이름으로 간주한다.

 

즉, 이것은 더이상 배열의 인덱스가 아니다.

예를 들어 다음의 코드는 "-1.23" 이라는 이름의 프로퍼티를 생성하며, 배열의 원소를 정의하는 것이

아님을 주의한다.

a[-1.23] = true;

 

 

 

1. 배열에 새로운 원소 추가하기

 

C나 자바 같은 프로그램 언어에서 배열이 가질 수 있는 원소의 개수는 배열이 생성될 당시에 지정되고 그 개수가 변하지 않는다. 그러나 자바스크립트는 다르다. 배열은 임의 개수의 원소를 가질 수 있으며 원소의 개수는 언제든 변경할 수 있다.

배열에 새로운 원소를 추가하려면 그 값을 할당하기만 하면 된다.

a[10] = 10;

자바스크립트 배열의 인덱스는 연속적이지 않아도 된다. 이것은 배열의 인덱스를 반드시 연속된 범위의

숫자 안에서 고르지 않아도 됨을 의미한다. 자바스크립트는 배열에 실제로저장된 원소들에 대해서만 메모리를 할당하도록 구현할 수 있다. 즉, 다음과 같은 코드를 실행할 때에 자바스크립트 인터프리터는 0번 인덱스와 10,000번 인덱스를 위해서만 메모리를 할당하며 그 사이에 있는 9,999개의 인덱스에 대해서는 메모리를

할당하지 않는다.

a[0] = 1;
a[10000] = "this is element 10,000";

또한 배열 원소는 객체에도 추가될 수 있다.

var c = new Circle(1, 2, 3);
c[0] = "this is an array element of an object!";  // c[0]은 객체의 배열 원소다.

이 예는 단지 객체에 "0" 이라는 이름의 프로퍼티를 추가할 뿐이다. 객체에 배열 원소를 추가한다고 해서

객체가 배열이 되지는 않는다.

 

 

 

2. 배열 원소 삭제하기

 

delete 연산자를 사용하면 배열 원소의 값을 undefined 값으로 설정할 수 있다.

하지만 이렇게 하면 배열 원소 그 자체는 사라지지 않고 여전히 존재한다.

배열 원소를 배열에서 완전히 삭제하고 삭제한 배열 원소의 뒤쪽에 위치한 원소들을 앞쪽(tolower indexes)으로 옮겨서 저장하려면 배열 메서드를 사용해야만 한다.

 

Array.shift() 메서드는 배열의 첫 번째 원소를 삭제하고 Array.pop() 메서드는 배열의 마지막 원소를 삭제하며, Array.splice() 메서드는 연속된 범위 안의 원소들을 일괄적으로 삭제한다. 이 함수들은 이 장의 후반부와 3부에서 자세히 설명한다.

 

 

 

3. 배열의 길이

 

Array() 생성자 혹은 배열 리터럴 등의 방법을 사용하여 생성된 모든 배열에는 이 비열에 있는 원소의 수를

알려주기 위한 length라는 이름의 특별한 프로퍼티가 있다. 좀 더 정확히 말하자면 배열은 정의되지 않은

원소도 가질 수 있기 때문에, length 프로퍼티는 배열 안에서 가장 큰 인덱스 값보다 언제나 하나 더 큰 값이다. 일반적인 객체 프로퍼티와 달리, length 프로퍼티는 배열에 새로운 요소가 추가될 때마다 위의 규칙을

만족하기 위해 자동으로 갱신된다. 예를 들면 다음과 같다.

var a = new Arra();      // a.length == 0 (아무런 원소도 정의되지 않았다)
a = new Array(10);      // a.legnth == 10 (빈 원소가 0부터 9까지 정의된다)
a = new Array(1,2,3);   // a.length == 3 (원소가 0부터 2까지 정의된다)
a = [4, 5];                  // a.length == 2 (원소가 0, 1번이 정의된다)
a[5] = -1;                   // a.length == 3 (원소 0, 1, 5 번이 정의된다)
a[49] = 0;                   // a.length == 3 (원소 0, 1, 5, 49번이 정의된다)

앞에서 배열 원소의 인덱스는 반드시 2³²-1보다 작은 값이어야 한다고 설명했다.

따라서 length 프로퍼티가 가질수 있는 가장 큰 값은 2³²-1이다.

 

 

 

 

4. 배열 순회하기

 

length 프로퍼티의 가장 일반적인 용도는 아마도 배열의 모든 원소를 순회하는 작업일 것이다.

예를 들면 다음과 같다.

var fruits = ["mango", "banana", "cherry", "pear"];
for (var i = 0; i < fruits.length; i++)

alert!(fruits[i]);

물론, 이 예는 배열의 원소들이 배열 안의 0번 인덱스에서 시작하여 연속적으로 나열되어 있다고 가정한다.

이 가정을 만족하지 않는다면 다음과 같이 배열 원소를 사용하기 전에 그 배열 원소가 정의되어 있는지

검사해야만 한다.

for (var i = 0; i < fruits.length; i++)

if (fruits[i]) alert!(fruits[i]);

이와 같은 루프 구문은 Array() 생성자로 생성된 배열의 원소를 초기화하는 데에도 사용할 수 있다.

var lookup_table = new Array(1024);
for(var i = 0; i < lookup_table.length; i++)

lookup_table[i] = i * 512;

 

 

 

 

5. 배열 크기 조절하기

 

배열의 length 프로퍼티는 읽고 쓸 수 있는 값이다. length 프로퍼티를 현재의 값보다 작게 설정하면

배열은 그 새로운 길이로 축소된다. 즉 새롭게 설정된 배열의 길이를 벗어나는 위치의 원소들은 버려지고

그 원소들의 값은 전부 잃어버린다.

length 프로퍼티를 현재의 값보다 크게 설정하면 배열의 끝 부분에 정의되지 않은 원소들이 추가되면서

배열이 새로운 길이로 늘어난다.

객체는 배열 원소를 할당 받을 수 있지만 length 프로퍼티는 없음을 유의하라.

지금까지 설명한 length 프로퍼티의 특별한 행동 양식이야말로 배열이 가진 가장 중요한 특징이라 할 수 있다.

객체와 배열을 구분하는 또 다른 중요한 특징인 배열의 다양한 메서드는 7.7절에서 설명한다.

 

 

 

 

6. 다차원 배열

 

자바스크립트는 진정한 의미에서의 다차원 배열을 지원하지는 않는다.

그러나 배열의 배열을 사용하여 효과적으로 다차원 배열을 흉내 낼 수 있다.

배열의 배열에서 원소에 접근하기 위해서는 단순히 [] 연산자를 두 번 사용하면 된다.

예를 들어, matrix가 배열이라고 가정하자. matrix[x]의 모든 배열 원소는 숫자 배열이다.

 

이 숫자 배열의 특정 숫자에 접근하기 위해서는 matrix[x][y]와 같이 쓸 수 있다.

예를 들어 구구단표를 작성하기 위하여 2차원 배열을 사용하는 방법은 다음과 같다.

// 다차원 배열을 생성한다.
var table = new Array(10);                  // 구구단표의 열 개 행
for(var i = 0; i < table.length; i++) {

table[i] = new Array(10);             // 각 행에는 열 개의 열이 있다.

}

// 배열을 초기화 한다.
for(var row = 0; row < table.length; row++) {

for(col = 0; col < table[row].length; col++) {

table[row][col] = row*col;

}

}

// 5*7을 계산하기 위하여 구구단표를 사용한다.
var product = table[5][7];         // 35