5. Javascript 배열 (5) - 배열의 프로퍼티 다루기

 

배열의 프로퍼티 동적 생성

배열 역시 자바스크립트 객체에 속한다. 그래서 '배열로서의 원소' 이외에 객체로서의 프로퍼티를 가질 수 있습니다. 배열의 원소와 프로퍼티를 구분하여, 동적 생성을 테스트 하고 어떤 변화가 생기는지 아래에서 확인해봅시다. 

 

var newArr = ['aaa', 'bbb', 'ccc'];
console.log(newArr.length);
// 3

newArr.name = 'alphabet';
newArr.age = 99;
console.log(newArr.length);
// 3

newArr[3] = 'ddd';
console.log(newArr.length);
// 4

console.dir(newArr);
// [ 'aaa', 'bbb', 'ccc', 'ddd', name: 'alphabet', age: 99 ]

 

위와 같이 객체 newArr에 프로퍼티 name / age를 추가하였습니다. 하지만 객체의 length에는 변동이 없었죠. 즉, length는 배열 원소의 개수를 나타내는 프로퍼티입니다. 하지만 배열 객체 인덱스값을 추가하여 원소를 추가하였을 경우 length가 증가하여 3에서 4로 변한 것을 확인할 수 있습니다. 

 

최종적으로 객체 newArr을 출력해보면, 배열원소들과 name/age라는 이름의 프로퍼티가 각각 출력되는 것을 확인할 수 있습니다. 

 

 

---

 

배열 프로퍼티 열거하기

for in문을 활용하면 객체의 프로퍼티를 열거할 수 있습니다. 단, 위에서 살펴본 것 처럼 하나의 객체 안에는 배열 원소와 일반 객체로서의 프로퍼티가 모두 포함되어 있기 때문에, for in문을 사용할 경우 모든 배열 원소와 프로퍼티가 출력됩니다. 

 

만일 배열의 요소만을 정확히 열거하여 출력하고 싶을 경우에는 for문을 사용해야 합니다. 

 

var newArr = ['aaa', 'bbb', 'ccc'];
console.log(newArr.length);

newArr.name = 'alphabet';
newArr.age = 99;
console.log(newArr.length);

newArr[3] = 'ddd';
console.log(newArr.length);

for (var prop in newArr){
    console.log(prop, newArr[prop]);
}
// 0 aaa
// 1 bbb
// 2 ccc
// 3 ddd
// name alphabet
// age 99

for (var i = 0; i < newArr.length; i++){
    console.log(i, newArr[i]);
}
// 0 aaa
// 1 bbb
// 2 ccc
// 3 ddd

 

 

---

 

배열 요소 삭제

배열도 객체이므로, 배열 원소나 프로퍼티 삭제에 delete 키워드를 사용할 수 있습니다. 단, delete는 배열 원소를 undefined로 바꾸는 역할을 하기 때문에 length에는 변화가 없습니다. 

 

var newArr = ['aaa', 'bbb', 'ccc', 'ddd'];

delete newArr[2];
console.log(newArr);
//[ 'aaa', 'bbb', <1 empty item>, 'ddd' ]

console.log(newArr.length);
// 4

 

만일 배열 요소를 완벽하게 삭제하고 싶다면, 배열 메소드 중 splice( )를 사용합니다. 

 

splice(start, deleteCount, item...)

* start : 배열에서 시작 인덱스
* deleteCount : start 인덱스부터 삭제할 원소의 개수
* item : 삭제할 위치에 새로 추가할 요소

 

var newArr = ['aaa', 'bbb', 'ccc', 'ddd'];

newArr.splice(2, 1);
console.log(newArr);
// [ 'aaa', 'bbb', 'ddd' ]