[Javascript] 유사 배열 객체와 배열의 차이

 

 

 

유사 객체 배열(array-like objects)란 무엇이고 배열과 어떤 차이가 있는지 간단하게 알아보겠다.

 

 

1. 유사 배열 객체

---

유사 배열 객체란 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다.

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

 

 

 

 

2. 예시

---

 

HTML

<div class="text">Hello</div>
<div class="text">World</div>
<div class="text">I'm</div>
<div class="text">Programmer</div>

 

 

 

JavaScript

const texts = document.querySelectorAll('.text');
console.log(texts);

 

 

 

결과값

 

 

 

 

배열처럼 보이지만 풀어보면 아래와 같이된다. 

{
  0: div.text,
  1: div.text,
  2: div.text,
  3: div.text,
  length: 4,
}

 

 

 

즉 배열같이 생겼지만 객체이기 때문에 유사 배열 객체라고 한다.  

유사 배열 객체와 일반 객체의 중요한 차이는 배열의 forEach, map, filter, reduce 같은 메서드를 사용할 수 없다는 것이다. 위와 같은 메서드를 사용하고 싶다면 Array.from() 메서드를 사용하면 된다.

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