| 유사 배열 객체(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가 대표적인 유사 배열 객체입니다.

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']

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