배열과 유사 배열 객체

유사 배열 객체

이름 그대로 배열과 유사한 객체

배열처럼 보이지만, 사실 key가 숫자이고, length 값을 가지고 있는 객체

JS 에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다.

 

// 배열
var arr1 = ['aaa', 'bbb', 'ccc'];
console.log(arr1); // (3) ["aaa", "bbb", "ccc"] 

// 유사배열
var arr2 = document.body.children;
console.log(arr2);
// HTMLCollection(10) [header.main-header, aside.main-sidebar, div.wrapper, div#playerArea, 
// iframe#history, script, div.ax5-ui-toast-container.top-right, div.ax5-ui-toast-container.top-right, 
// div.ax5-ui-toast-container.top-right, div#syno-nsc-ext-comp-1008.x-tip-invalid, playerArea: div#playerArea, 
// history: iframe#history, syno-nsc-ext-comp-1008: div#syno-nsc-ext-comp-1008.x-tip-invalid]

 

 

유사배열객체는 배열 처럼 생겼지만 객체이고,

객체지만 일반객체와 다르다.

forEach, map, filter, reduce 같은 메서드를 사용 할 수 없다.

위 메서드를 사용 하기 위해서 Array.from()으로 유사 배열 객체에 있는 value 를 복사해 배열로 만들어 사용한다.

const texts = document.querySelectorAll('.text');
Array.from(texts).map((text) => console.log(text));