[JavaScript] 다시 공부하는 JavaScript 3. 배열

JavaScript에서 배열은 특별한 객체이다.

C나 Java의 경우에는 배열을 생성할 때 배열의 크기를 지정해야하지만 JavaScript에서는 크기를 지정하지 않아도 되고, 어느 위치에 어느 타입의 데이터를 저장하여도 에러가 발생하지 않는다. (와우)

 

1. 배열 리터럴

JavaScript에서 객체 리터럴은 프로퍼티 이름과 프로퍼티 값을 모두 표기해야 하지만,

배열 리터럴에서는 각 요소의 값 만을 표기한다.

그리고 배열 내 위치 인덱스 값을 통해 해당 원소에 접근할 수 있다.

var pencilCase = ['pencil', 'eraser', 'pen'];

console.log(pencilCase[0]); // pencil 출력됨

 

2. 배열의 요소 생성

JavaScript 배열의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 값을 동적으로 추가할 수 있다.

var emptyArray = [];
console.log(emptyArray); // undefined 출력됨

emptyArray[1] = 100;
emptyArray[3] = 300;

console.log(emptyArray); // [undefined, 100, undefined, 300] 출력됨
console.log(emptyArray.length); // 4 출력됨

 

3. 배열의 length 프로퍼티

JavaScript의 모든 배열에는 length 프로퍼티가 있다.

length 프로퍼티는 배열의 원소 개수를 나타내지만, 실제로 배열에 존재하는 원소 개수와 일치하는 것은 아니다.

length 프로퍼티는 배열 내에 가장 큰 인덱스에 1을 더한 값이다.

 

배열의 length 프로퍼티는 코드를 통해 명시적으로 변경할 수도 있다!

var arr = [0, 1, 2];
console.log(arr.length) = 3;

arr.length = 5; // 배열의 length 프로퍼티를 명시적으로 변경
console.log(arr); // [0, 1, 2, undefined, undefind] 출력됨

arr.length = 2;
console.log(arr[2]); // undefined 출력됨

length 프로퍼티를 벗어나는 실제 값은 삭제된다.

 

4. 배열 표준 메서드와 length 프로퍼티

JavaScript는 배열에서 사용 가능한 다양한 표준 메서드를 제공한다.

이러한 배열 메서드는 length 프로퍼티를 기반으로 한다. 예를 들면 push() 메서드가 있다.

push() 메서드는 length 프로퍼티가 가리키는 인덱스에 값을 저장하는 메서드이다.

var arr = [0, 1, 2];

arr.push(3);
console.log(arr); // [0, 1, 2, 3] 출력됨

console.log(arr.length); // 4 출력됨

arr.length = 5; // 배열 arr의 length 프로퍼티를 명시적으로 변경
arr.push(5); 

console.log(arr); // [0, 1, 2, 3, undefined, 5] 출력됨

 

5. 배열과 객체

JavaScrit에서 기본 타입을 제외한 나머지는 모두 객체이다. 그래서 배열도 객체이다. 하지만 배열을 일반 객체와는 차이가 있다.

// colorsArray 배열
var colorsArray = ['red', 'blue', 'pink'];
console.log(colorsArray[0]); // red 출력됨
console.log(colorsArray[1]); // blue 출력됨
console.log(colorsArray[2]); // pink 출력됨

// colorsObj 객체 
var colorsObj = {
    '0': 'red',
    '1': 'blue',
    '2': 'pink'
};
console.log(colorsObj[0]); // red 출력됨
console.log(colorsObj[1]); // blue 출력됨
console.log(colorsObj[2]); // pink 출력됨

// typeof 연산자 비교
console.log(typeof colorsArray); // object 출력됨
console.log(typeof colorsObj); // object 출력됨

// length 프로퍼티
console.log(colorsArray.length); // 3 출력됨
console.log(colorsObj.length); // undefined 출력됨

// 배열 표준 메서드
colorsArray.push('green');
console.log(colorsArray); // ['red', 'blue', 'pink', 'green'] 출력됨
colorsObj.push('green'); // 에러 발생! TypeError: colorsObj.push is not a function. (In 'colorsObj.push('green')', 'colorsObj.push' is undefined)

마지막 라인의 배열 표준 메서드의 경우가 가장 중요하다.

객체 리터럴 방식으로 생성한 객체의 경우에는 Object.prototype 객체가 프로토타입이기 때문에 배열 표준 메서드를 사용할 수 없으나,

배열의 경우에는 Array.prototype 객체가 부모 객체인 프로토타입이 되므로 배열 표준 메서드를 사용할 수 있다.

 

6. 배열의 프로퍼티 동적 생성

JavaScript에서 배열은 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로 프로퍼티를 추가할 수 있다.

var arr = ['zero', 'one', 'two'];
console.log(arr.length); // 3 출력됨

arr.color = 'blue';
arr.name = 'number_array';
console.log(arr.length); // 3 출력됨

arr[3] = 'three';
console.log(arr.length); // 4 출력됨

//배열 객체 출력됨
console.dir(arr);

배열의 length 프로퍼티는 배열 원소의 가장 큰 인덱스가 변했을 경우에만 변경된다.

배열도 객체처럼 'key: value' 형태로 배열 원소 및 프로퍼티 등을 가질 수 있다.

 

7. 배열의 프로퍼티 열거

객체의 경우에 for in 문(향상된 for문)으로 프로퍼티를 열거한다고 앞에서 설명했었는데,

배열의 경우에는 for in 문으로 프로퍼티를 열거할 경우에는 불필요한 프로퍼티가 출력될 수 있다.

그래서 되도록이면 for 문을 사용하는 게 좋다.

var arr = ['zero', 'one', 'two'];
arr.color = 'blue';
arr.name = 'number_array';

for (var prop in arr) {
	console.log(prop, arr[prop]);
}

for (var i = 0; i<arr.length; i++) {
	console.log(i, arr[i]);
}

아래와 같은 출력결과를 얻을 수 있다.

for in 문을 썼을 경우에는 배열 요소를 포함해 color와 name 프로퍼티까지 출력되고, for 문을 썼을 경우에는 배열 요소만 출력된다.

 

8. 배열 요소 삭제

배열도 객체이므로, 배열 요소나 프로퍼티를 삭제하는 데 delete 연산자를 사용할 수 있다.

var arr = ['zero', 'one', 'two'];
delete arr[2]; 
console.log(arr); // ['zero', 'one', undefined'] 출력됨
console.log(arr.length); // 3 출력됨

delete 연산자로 배열의 요소를 삭제하면 arr[2]에 undefined가 할당되는데 그렇다고 하더라도 length 프로퍼티의 값이 3에서 2가 되지는 않는다. 즉, delete 연산자는 해당 요소의 값을 undefined로 설정할 뿐 원소 자체를 삭제하지는 않는 것이다.

 

그래서 보통 배열에서 요소들을 완전히 삭제할 경우 JavaScript에서는 splice() 배열 메서드를 사용한다.

splice(start, deleteCount, item...)
// start: 배열에서 시작 위치
// deleteCount: start에서 지정한 시작 위치부터 삭제할 요소의 수
// item: 삭제할 위치에 추가할 요소

var arr = ['zero', 'one', 'two'];

arr.splice(2, 1); // 2번째 요소를 시작점으로 1개의 원소를 삭제한다.
console.log(arr); // ['zero', 'one'];
console.log(arr.length); // 2 출력됨

 

9. Array() 생성자 함수

JavaScript에서 배열을 생성할 때, 배열 리터럴을 주로 사용하는데 이는 결국 Array() 생성자 함수로 배열을 생성하는 과정을 단순화 시킨 것이다.

Array() 생성자 함수를 사용하는 경우에는 new 연산자를 반드시 같이 써주어야 하며,

Array() 생성자 함수의 인자의 개수에 따라 동작이 다르므로 주의해야 한다.

var arr = new Array(2); // 배열의 크기가 3인 배열 생성
console.log(arr); // [undefined, undefined] 출력됨

var array = new Array(1, 2) // 배열의 요소가 1, 2인 배열 생성
console.log(array); // [1, 2] 출력됨

 

 

10. 유사 배열 객체 

배열처럼 length 프로퍼티가 있는 객체를 유사 배열 객체 (array-like objects)라고 한다.

이러한 유사 배열 객체의 가장 큰 특징은 객체임에도 불구하고, JavaScript의 표준 배열 메서드를 사용하는 게 가능하다는 점이다.

var arr = ['bar'];
var obj = {name: 'foo', length: 1};

arr.push('baz');
console.log(arr); // ['bar', 'baz'] 출력됨

Array.prototype.push.apply(obj, ['baz']);
console.log(obj); // {'1': 'baz', name: 'foo', length: 2}

 

[출처]

인사이드 자바스크립트 / 송형주, 고현준 지음/ 한빛미디어

** 해당 게시물은 '인사이드 자바스크립트'를 보고 개인적인 용도로 학습하기 위하여 정리, 게시한 글입니다.