[ES6] Array.from() and Array.of()

array method에 대하여 알아보자.

 

1. Array.of()

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

Array.of() - JavaScript | MDN

Array.of() 메서드는 인자의 수나 유형에 관계없이 가변 인자를 갖는 새Array 인스턴스를 만든다.

이러한 차이가 있다고 한다~~!~!~

 

 

2. Array.from()

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

Array.from() - JavaScript | MDN

Array.from() 은 유사 배열 객체나 반복 가능한 객체를 얕게 복사해서 새로운 Array를 만들어 낸다.

 

예를 들어 button 10개를 만들고 각각에 eventListener를 적용해주고 싶다.

여기서 그냥 querySelectorAll로 button을 선택후 콘솔로그 해보면 NodeList라고 나오는데 여기에는 적용되니 넘어가고

className을 줘서 여기에 이벤트 리스너를 줘보면

이런 에러가 뿜어져 나온다.

코드를 살펴보면 buttons는 Array도 아니고 NodeList도 아닌 HTMLCollectionOf이다.

이같은 것을 array like object라고 하는데 다른말로 유사배열객체라고 한다.

배열이 아니기에 forEach가 적용이 되지 않는 것이다.

 

이때 필요한 것이 바로 Array.from()이다.

이렇게 Array.from에 유사배열객체를 담아주면 Array로 변환이 되고 이제 Array가 되었으니 이벤트리스너가 제대로 작동이 된다.