Array.from / forEach / NodeList, HTMLCollection, Array 차이점

범위

2.3 Changing Color

---

Array.from 메소드

index.html

그냥 colors를 가져오면 이런 결과가 나오는데 이건 원하는 결과가 아님

array를 만들자

Array.from이라는 array constructor(생성자)로부터 method를 호출해야 함

Array.from 메소드는 object로부터 array를 만든다.

colors를 array로 만들었다.

---

추가공부

forEach

array를 주면 그 안에서 forEach로 color를 가질 수 있다. (???)

 

도와주세요~ MDN!

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

배열에서 요소들을 반복해서 찾아주는 것이었다

 

참고:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

여기서 color를 potato로 바꿔줘도 상관없음

이름(potato)은 array안의 각각의 아이템들을 대표하는 것일뿐

뭐로 하든 상관 없음

---

querySelector는 수 많은 컬러 div중 오직 맨 처음 하나의 div만 선택합니다.

결과적으로 컬러는 변하지 않습니다.

이때 사용이 가능한건 querySelectorAll 입니다.

 

저는 selectorall 써서 했는데, 이건 array로 주더라구요!

const colors = document.querySelectorAll(".jsColor");
colors.forEach(color=> color.addEventListener("click", handleColor));

 

 

iejw1914님의 방법으로 console.log를 찍어봤는데 array는 아니었다.

그래도 적용은 됨^_^ (NodeList가 forEach 메서드를 가지고 있기 때문)

prototype이 NodeList로 나오는데 이거는 또 다른거드라....

 

 

NodeList와 Array의 차이점 링크

• NodeList는 JavaScript API가 아닌 browser가 제공하는 API이다
• NodeList와 Array 각각 고유한 속성과 메서드가 있고, 필요한 경우에 NodeList를 Array로 변환할 수 있다. (Array.from() 사용하면 됨)

 

HTMLCollection과 NodeList의 차이점 링크

• HTMLCollection은 문서 내에 순서대로 정렬된 노드의 컬렉션으로, 유사 배열이다. 그래서 모든 메서드를 가지고 있지 않음.
• .forEach나 .map을 사용하려면 Array.from()을 사용해야 함
• NodeList도 유사 배열인데, forEach 메서드는 가지고 있다. 하지만 map, filter 등의 메서드를 사용하려면 Array.from()을 사용해야 함.