[javascript] 유사 배열 객체

유사 배열 객체는 배열과 유사한 동작을 하는 객체를 말한다.

유사 배열 객체는 배열처럼 인덱스를 통해 요소에 접근할 수 있고, length 속성을 가지고 있다.

하지만 배열의 메서드를 직접 사용할 수는 없다!

 

1. arguments 객체

 함수 내에서 사용되는 특별한 객체로, 함수에 전달된 인자들을 유사 배열 객체로 나타냄.

function sum() {
  console.log(arguments); // [1, 2, 3] (arguments 객체는 유사 배열 객체로 함수에 전달된 인자들을 나타냄)
  console.log(arguments.length); // 3 (전달된 인자의 개수)
}

sum(1, 2, 3);

 

2. NodeList 객체

 DOM 요소를 선택한 결과로 반환되는 객체.

querySelectorAll() 등으로 선택한 요소들은 유사 배열 객체로 표현됨.

var elements = document.querySelectorAll('div'); // NodeList 객체 (유사 배열 객체로 선택된 div 요소들을 나타냄)
console.log(elements); // NodeList(3) [div, div, div] (선택된 div 요소들)
console.log(elements.length); // 3 (선택된 div 요소의 개수)

 

3. HTMLCollection 객체

특정 DOM 요소 컬렉션을 나타내는 객체로, getElementsByTagName() 등으로 얻을 수 있다.

var paragraphs = document.getElementsByTagName('p'); // HTMLCollection 객체 (유사 배열 객체로 선택된 p 요소들을 나타냄)
console.log(paragraphs); // HTMLCollection(2) [p, p] (선택된 p 요소들)
console.log(paragraphs.length); // 2 (선택된 p 요소의 개수)

---

그렇다면 배열의 메서드와 속성을 직접 사용할 수 없으면 어떻게 해..?

ㄱㅊ

Array.from() 메서드를 사용하여 유사 배열 객체를 실제 배열로 변환하거나, 배열의 메서드를 빌려와 사용하면 됨.

var elements = document.querySelectorAll('div');
var array = Array.from(elements); // 유사 배열 객체를 배열로 변환

console.log(array);
console.log(array.length);

array.push('new element'); // 배열 메서드 사용 가능
console.log(array);

 

유사 배열 객체는 배열과 유사한 동작을 하는 객체이지만 배열이 아니므로 주의....