🧩 JavaScript […box.children]와 이터러블(Iterable) 완벽 정리

[...box.children] 구문은 HTMLCollection을 **배열(Array)**로 변환하기 위한 문법입니다.
하지만 이것은 HTMLCollection에만 국한되지 않고, 모든 이터러블(Iterable) 객체에 적용할 수 있습니다.

1️⃣ [...box.children]의 의미

const arr = [...box.children];

• box.children → HTMLCollection(유사 배열 객체)
• ...(스프레드 연산자) → 이터러블을 펼쳐서 새로운 배열로 복사
• 결과 → 실제 배열(Array)

즉, 내부적으로는 이렇게 동작합니다 👇

“box.children 안의 요소들을 하나씩 꺼내서 배열에 담아라.”

2️⃣ HTMLCollection이란?

HTMLCollection은 DOM 요소들의 집합을 나타내는 유사 배열 객체입니다.

<div class="box">
  <p>첫 번째</p>
  <p>두 번째</p>
  <p>세 번째</p>
</div>

const box = document.querySelector(".box");
console.log(box.children);
// HTMLCollection(3) [<p>, <p>, <p>]

💡 HTMLCollection은 forEach, map, filter 같은 배열 메서드를 바로 사용할 수 없습니다.

그래서 다음과 같이 배열로 변환해야 합니다 👇

[...box.children].forEach(el => console.log(el.textContent));

3️⃣ [...iterable]은 HTMLCollection뿐 아니라 “모든 이터러블”에 사용 가능

스프레드 문법(...)은 **이터러블(Iterable)**을 대상으로 동작합니다.
이터러블이란 for...of로 순회 가능한 객체를 말합니다.

✅ 스프레드 가능한 대표 이터러블

4️⃣ ❌ 스프레드가 불가능한 경우 (비이터러블)

일반 객체(Object)는 기본적으로 이터러블이 아닙니다.

const obj = { a: 1, b: 2 };
const arr = [...obj]; // ❌ TypeError: obj is not iterable

✅ 하지만 변환 후엔 가능!

객체를 배열로 변환하면 스프레드 사용이 가능합니다 👇

[...Object.entries(obj)] // ✅ [['a',1], ['b',2]]
[...Object.keys(obj)]    // ✅ ['a','b']
[...Object.values(obj)]  // ✅ [1,2]

5️⃣ 요약 정리

🔚 마무리

[...box.children]은 HTMLCollection을 배열로 변환하는 코드지만,
본질적으로는 **“이터러블이라면 모두 펼칠 수 있다”**는 뜻입니다.

즉, [...iterable]은
배열로 변환하거나 복사할 때 사용하는 가장 범용적인 문법입니다 🚀