# JS - Array.from()사용, NodeList와 배열의 차이

querySelectorAll() 은 배열처럼 보이지만 “배열이 아니다.”

그래서 map(), filter() 같은 배열 전용 메서드를 쓸 수 없다. Array.from() 으로 진짜 배열로 변환하는 과정이 필요하다.

---

1) querySelectorAll()의 반환값은 “NodeList”

예를 들어:

const checked = document.querySelectorAll(".row-check:checked");

checked 는 배열이 아니다.
정확한 타입은 NodeList 라는 “유사배열 객체”.

유사배열이란:

• 길이(length) 있음
• 인덱스로 접근 가능
• 여러 요소를 담고 있음

하지만,

• map() 없음
• filter() 없음
• reduce() 없음

즉, 배열처럼 생겼지만 배열이 아니다.

---

2) NodeList와 배열(Array)의 차이

특징	NodeList	Array
length 있음	O	O
인덱스로 접근	O	O
map(), filter() 사용	X	O
push(), pop() 사용	X	O
진짜 배열?	X	O

즉,

NodeList = 배열처럼 보이지만 기능이 제한됨.

---

3) 그럼 왜 Array.from()을 쓰냐?

바로 쓸 수 없는 NodeList를
완전한 배열(Array)로 변환하기 위해서.

const arr = Array.from(checked);

→ 이제 arr은 진짜 배열이 된다.

그러면:

arr.map(...)
arr.filter(...)
arr.reduce(...)

모든 배열 기능을 사용할 수 있게 된다.

 

---

✔ querySelectorAll → NodeList(유사배열, map 없음)

✔ Array.from(NodeList) → 진짜 Array

✔ Array.map(el ⇒ … ) 사용 가능

그래서 순서가 이렇게 된다:

const checked = document.querySelectorAll(".row-check:checked");  
// NodeList

const ids = Array.from(checked).map(el => el.dataset.id);
// Array → id 배열 생성