[Java Script] 유사 배열 객체 알아보기

| 유사 배열 객체(Array-like Objects)

자바스크립트에서 유사 배열 객체는 실제로 배열은 아니지만 index로 값에 접근할 수 있고,

length속성을 가지고 있어 배열과 유사한 객체입니다.

let arrayLikeObj = {0: 'A', 1: 'B', 2: 'C', length: 3};

console.log(arrayLikeObj[0]); // 'A'
console.log(arrayLikeObj.length); // 3
console.log(Array.isArray(arrayLikeObj)); // false

for (let i = 0; i < arrayLikeObj.length; i++) {
  console.log(arrayLikeObj[i]);
}
// "A"
// "B"
// "C"

 

HTMLcollection이나 NodeList이 대표적인 유사 배열 객체입니다.

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

let selectDiv = document.querySelectorAll("div");
let collection = document.body.children;

console.log(selectDiv); // NodeList(5) [div, div, div, div, div]
console.log(collection); // HTMLCollection(6) [div, div, div, div, div, script]

console.log(Array.isArray(selectDiv)); // false
console.log(Array.isArray(collection)); // false

 

하지만 실제로 배열은 아니기 때문에 push, map 같은 메서드들은 사용할 수 없습니다.

let selectDiv = document.querySelectorAll("div");
selectDiv.push("hi"); // Uncaught TypeError: selectDiv.push is not a function

 

 

만약 사용하고 싶으면 유사 배열 객체를 배열로 만들어주면 되는데

Array.from을 사용하면 쉽게 할 수 있습니다.

let selectDiv = document.querySelectorAll("div");
let collection = document.body.children;

let arr = Array.from(selectDiv);
let arr1 = Array.from(collection);

console.log(arr); // [div, div, div, div, div]
console.log(arr1); // [div, div, div, div, div, script]
console.log(Array.isArray(arr)); // true
console.log(Array.isArray(arr1)); // true

 

그럼 push, map 같은 메서드들을 사용할 수 있습니다.

let selectDiv = document.querySelectorAll("div");
let arr = Array.from(selectDiv);

arr.push("hi");
console.log(arr); // [div, div, div, div, div, 'hi']