5. Javascript 배열 (4) - 배열과 객체 비교

 

일반 객체와 배열 객체의 차이

아래와 같이, 배열 객체인 hiphopArray와 hiphopObj를 각각 생성하여 차이를 살펴보도록 합시다. 

 

 

---

 

 

1. 객체의 생성

 

var hiphopArray = ['AOMG', 'IMJMWDP', 'VMC'];
console.log(hiphopArray[0]);
console.log(hiphopArray[1]);
console.log(hiphopArray[2]);

var hiphopObj = {
    '0' : 'AOMG',
    '1' : 'IMJMWDP',
    '2' : 'VMC'
};
console.log(hiphopObj[0]);
console.log(hiphopObj[1]);
console.log(hiphopObj[2]);

 

위와 같이 배열 객체인 hiphopArray와 일반 객체 hiphopObj를 리터럴 방식으로 생성하였고, 각각의 원소/프로퍼티를 출력하였습니다. 결과는 모두 동일하게 출력되었습니다.

 

한 가지 확인할 부분은, hiphopObj의 프로퍼티를 출력할 때 인덱스 값 처럼 출력하는 부분입니다. 원래 대괄호를 이용해 객체의 프로퍼티를 출력할 때는 작은 따옴표(' ')를 사용해 문자열로 표시해야 하지만 이렇게 [ ] 내부에 숫자가 들어올 경우에는 자동으로 문자열로 변환하여 출력하게 된다는 점을 기억해 둡시다. 

 

 

---

 

2. 데이터 타입 비교

 

console.log(typeof hiphopArray);
console.log(typeof hiphopObj);

// object
// object

 

위와 같이 두 개의 객체의 데이터 타입을 출력해 보았습니다. 배열과 일반객체, 모두 데이터 타입은 object로 출력됩니다. 일반 객체와 배열 객체를 데이터 타입으로는 구분할 수 없다는 점을 기억합시다. 

 

 

---

 

3. length 프로퍼티의 유무

 

console.log(hiphopArray.length);
console.log(hiphopObj.length);

// 3
// undefined

 

배열 객체와 일반 객체의 가장 근본적인 차이점 입니다. 배열 객체 hiphopArray는 3이라는 length값이 출력되지만, 일반 객체 hiphopObj에서는 length 프로퍼티가 존재하지 않기 때문에 undefined가 출력됩니다. 

 

 

---

 

4. 배열 표준객체의 사용

 

hiphopArray.push('DAYTONA');
console.log(hiphopArray);

hiphopObj.push('DAYTONA');
console.log(hiphopObj);

// [ 'AOMG', 'IMJMWDP', 'VMC', 'DAYTONA' ]
// TypeError: hiphopObj.push is not a function

 

객체 리터럴 방식으로 생성한 hiphopObj의 경우, [[Prototype]]객체는 Object.prototype입니다. 하지만 hiphopArray의 경우에는 Array.prototype입니다. Array.prototype 객체는 배열에서 사용하는 pop( ), push( )등의 표준 메서드를 갖고 있으며 Array.prototype의 [[Prototype]] 객체는 Object.prototype 객체가 되는 구조를 가지고 있습니다. 

 

그래서 배열 객체 hiphopArray는 상속을 받게되는 Object.prototype / Array.prototype의 표준 메서드를 모두 사용할 수 있으며 hiphopObj는 Array.prototype을 상속받지 않기 때문에, 배열 표준 메서드 사용 시 컴파일 에러가 발생하는 것입니다. 

 

아래와 같이 빈 배열과 객체를 생성해 각 객체의 [[Prototype]] 객체를 출력해보면 명확하게 드러납니다.

 

var newArray = [];
var newObj = {};

console.log(newArray.__proto__);
console.log(newObj.__proto__);

/* 크롬 브라우저에서 확인 */
// Array(0)
// Object

 

여기서 Array(0)은 Array.prototype을 의미합니다. 그리고 이 객체의 [[Prototype]]은 Object.prototype입니다.