개념 및 사용 방법

유사 배열 객체는 진짜 배열이 아닙니다.
하지만 배열처럼 인덱스로 여러 항목에 접근할 수 있고, length 속성도 가지고 있습니다.

유사 배열 객체는 실제 배열은 아니지만, 배열처럼 데이터를 다룰 수 있는 유연한 구조 덕분에, 특히 DOM 요소를 다룰 때 효율적으로 사용됩니다.

유사 배열 객체의 종류

일반 문자열이나 함수의 arguments를 제외하면, 유사 배열 객체는 HTMLCollection이나 NodeList와 같이 DOM 요소를 다루는 객체입니다.

유사 배열 객체를 순회하는 예제

다음은 querySelectorAll() 함수로 반환되는 유사 배열 객체인 NodeList의 예제입니다. 이 예제를 통해 유사 배열 객체의 특징과 기본 사용 방법을 쉽게 확인할 수 있습니다.

HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.querySelectorAll("li");  // li 선택자를 모두 선택
console.log(liElements); // NodeList(3) [li, li, li]

// 유사 배열로 length 속성 사용 가능
let liElementsLength = liElements.length;

// 순회를 통해 요소에 접근
for (let i = 0; i < liElementsLength; i++) {
    console.log(liElements[i].textContent);
}
// 출력: "김밥" "라면" "떡볶이"

유사 배열 객체의 특징

  • 인덱스를 통해 항목에 접근할 수 있습니다. (예: obj[0], obj[1])
  • length 속성을 가지고 있습니다.
  • 모든 유사 배열 객체는 전통적인 for 반복문으로 순회할 수 있습니다.

인덱스로 접근 가능 (예: obj[0], obj[1])

JavaScript 
// HTMLCollection 예제
const elements = document.getElementsByClassName("item");
console.log(elements[0]); // 첫 번째 요소에 접근

// NodeList 예제
const nodes = document.querySelectorAll("li");
console.log(nodes[1]); // 두 번째 요소에 접근

// arguments 객체 예제
function exampleFunc() {
    console.log(arguments[0]); // 첫 번째 인자에 접근
}
exampleFunc("hello", "world");

length 속성 보유

JavaScript 
// HTMLCollection 예제
const elements = document.getElementsByClassName("item");
console.log(elements.length); // 요소의 개수 확인

// NodeList 예제
const nodes = document.querySelectorAll("li");
console.log(nodes.length); // 요소의 개수 확인

// arguments 객체 예제
function exampleFunc(a, b, c) {
    console.log(arguments.length); // 전달된 인자의 개수 확인
}
exampleFunc(10, 20);

for 반복문으로 순회 가능

JavaScript 
// HTMLCollection 예제
const elements = document.getElementsByClassName("item");
for (let i = 0; i < elements.length; i++) {
    console.log(elements[i]);
}

// NodeList 예제
const nodes = document.querySelectorAll("li");
for (let i = 0; i < nodes.length; i++) {
    console.log(nodes[i]);
}

// arguments 객체 예제
function exampleFunc() {
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
exampleFunc("A", "B", "C");

실제 배열과의 차이점

배열 메서드(예: map(), filter(), push() 등)를 직접 사용할 수 없습니다.

유사 배열 객체를 배열로 만들기

유사 배열 객체는 배열처럼 인덱스로 접근하고 length 속성을 가지고 있지만, 배열 전용 메서드는 바로 사용할 수 없습니다. 이러한 메서드를 사용하려면 유사 배열 객체를 진짜 배열로 변환해야 합니다.

가장 대표적인 변환 방법은 스프레드 구문(...)을 사용하거나 Array.from() 함수를 사용하는 것입니다.

예제

HTML 
<ul>
    <li>김밥</li>
    <li>라면</li>
    <li>떡볶이</li>
</ul>
JavaScript 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

// 스프레스 구문을 사용해서 배열로 변환
const arr = [...liElements];

arr.forEach(li => { // 배열의 foreach() 메서드 적용
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

// Array.from() 메서드를 사용해서 배열로 변환
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => { // 배열의 foreach() 메서드 적용
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
스프레드 구문은 ... (점 세 개) 뒤에 해당하는 값(value)으로 순회할 수 있는 객체(배열, 문자열, DOM 컬렉션 등)를 붙이는 형식의 구문으로 해당 객체(배열, 문자열, DOM 컬렉션 등)의 항목들을 간단하게 개별적으로 펼쳐서 나열할 수 있습니다. 이 구문을 사용하면 유사 배열을 배열로 쉽게 변환할 수 있습니다.

코드 부연설명
Array.from() 함수는 지정한 유사 배열 객체나 이터러블 객체를 새로운 배열로 변환하여 반환하는 함수입니다.

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 배열의 메서드입니다. 코드 예제에서는 이 함수로 HTMLCollection를 배열 객체로 변환해서 접근할 수 있는 방법을 제시하고 있습니다.

같이 보기