[JavaScript]유사 배열 객체(Array-like Objects)

배열의 length 프로퍼티

유사 배열 객체를 설명하기 전에 배열의 length 프로퍼티에 대해 살펴봅시다. length 프로퍼티는 배열의 길이를 제공하지만, 몇 가지 트릭이 존재합니다.

 

다음 예제를 통해 length 프로퍼티가 어떻게 계산되는지 살펴봅시다.

let arr = [];
console.log('arr.length: ' + arr.length);

arr[0] = 0;
arr[1] = 1;
console.log('arr.length: ' + arr.length);

arr[10] = 10;
console.log('arr.length: ' + arr.length);

실행 결과

배열의 length 프로퍼티는 배열 요소의 개수가 아닌 맨 마지막 인덱스에 1을 더한 값을 반환합니다. 2~9번째 인덱스를 건너뛰고 10번째 인덱스에 값을 할당했으므로 arr의 length 프로퍼티는 맨 마지막 인덱스인 10에 1을 더한 결과인 11을 반환합니다.

 

배열 arr를 콘솔에 출력하면 2~9번째 인덱스의 값이 비어 있다는 것을 확인할 수 있습니다.

let arr = [];
arr[0] = 0;
arr[1] = 1;
arr[10] = 10;

console.log(arr);

실행 결과

그리고 배열 arr에서 forEach, map 등과 같은 배열을 순회하는 함수를 사용하면 비어 있는 요소는 생략됩니다.

let arr = [];
arr[0] = 0;
arr[1] = 1;
arr[10] = 10;

arr.forEach((item, index) => console.log(index + '번째 인덱스의 값: ' + item));

실행 결과

---

유사 배열 객체(array-like object)

JavaScript에서 length 프로퍼티를 가진 객체를 유사 배열 객체라고 말합니다.

 

배열은 기본적으로 length 프로퍼티를 가지고 있습니다.

console.dir({}); // 빈 객체
console.dir([]); // 빈 배열

실행 결과

그러나, 일반 객체에는 length 프로퍼티가 없으며 프로토타입이 Object입니다. 따라서 객체에서 length 프로퍼티를 호출하면 undefined가 출력되고 배열에서 사용할 수 있는 함수를 호출하면 구문 에러가 발생합니다.

let person = {
  name: '홍길동'
}

console.log(person.length); // undefined
person.push('A');

에러 내용

다음 예제는 person 객체에 length 프로퍼티를 추가하여 유사 배열 객체로 생성합니다.

let person = {
  name: '홍길동',
  age: 20,
  length: 2
}

console.log('person.length: ' + person.length);
console.dir(person);

실행 결과

person 객체에 length 프로퍼티가 추가되더라도 프로토타입은 Object이며, 배열에서 사용할 수 있는 함수를 호출하면 다음과 같이 구문 에러가 발생합니다.

let person = {
  name: '홍길동',
  age: 20,
  length: 2
}

person.push('서울');

에러 내용

하지만, apply() 함수를 사용하면 유사 배열 객체에서 배열 메서드를 사용하는 것이 가능합니다. 

let person = {
  name: '홍길동',
  age: 20,
  length: 2
}

Array.prototype.push.apply(person, ['Hi']);

console.log(person);

실행 결과

---

정리

• 일반 객체에 length 프로퍼티가 존재하는 경우 유사 배열 객체라고 말합니다.
• 유사 배열 객체의 대표적인 예시로 함수의 arguments 객체가 존재합니다.