[JS] 배열변환🤔 전개연산자, Array.from 메서드

배열 변환할 때마다 빈 배열에 push로 넣거나 전개연산자만 주구장창 사용했는데
윗분들(?) 코드보니까 Array.from 메서드를 많이 사용하고 계시더라.

결과값은 같길래 뭘 사용해도 상관없는건가 싶었는데... 아니었음🤯;
지금껏 개념도 모르고 사용한...ㅋ

전개연산자

단순히 배열 복사나 이터러블 객체를 배열로 만들 때 적합하다.
문법이 간단하고 직관적이라는 장점이 있다.

ex)

const set = new Set([1,2,3]);
const arr = [...set]; 
// [1,2,3]

const str = 'tomato';
const arr2 = [...str];
// ['t', 'o', 'm', 'a', 't', 'o']

유의할 점

• 유사 배열 객체(arguments, NodeList)처럼 이터러블이 아닌 경우에는 사용할 수 없다는 제한이 있다.

ex) 에러예시👇

const ex = 123;
const arr = [...ex];

하지만 querySelectorAll()로 반환한 요소에는 사용이 가능해서 의아했는데,
💡 현재 대부분의 최신 브라우저에서는 모든 NodeList 객체가 이터러블로 구현되어 있어서 querySelectorAll로 반환된 NodeList뿐 아니라 다른 방식으로 얻은 NodeList라도 전개 연산자를 사용할 수 있다고 한다.

주의할 점

• 브라우저 호환성
  - 일부 구형 브라우저나 특정 환경에서는 NodeList가 이터러블로 구현되어있지 않을 수 있기때문에 이런 경우 전개연산자가 작동하지 않을 수 있어, 안정성을 위해 Array.from 메서드를 사용하는 것이 좋다.
  
  
• HTMLCollection 보다는 NodeList
  - HTMLCollection과 NodeList는 모두 유사 배열 객체이면서 이터러블이기때문에 for...of문, for문 같은 반복문 사용이 가능하지만 HTMLCollection은 forEach메서드로 순회가 불가능하기 때문에 NodeList를 많이 사용하는 편이다.

💡즉, NodeList라면 대부분의 최신 환경에서 전개 연산자를 사용할 수 있으나, 브라우저 호환성이 필요하다면 Array.from()을 고려하는 것이 좋다.

존경하는 Inpa님의 이터러블-완벽 이해 (참고🙏)
codingEverybody_HTMLCollection과 NodeList 비교 (참고🙏)

---

Array.from()

이터러블 객체뿐 아니라 이터러블이 아닌 유사 배열 객체도 배열로 변환할 수 있어 유용하다.
두 번째 인자로 매핑 함수를 전달할 수 있어, 배열을 만드는 동시에 각 요소를 변환할 수 있다.

ex) 매핑 예시

const arr = Array.from('hello', char => char.toUpperCase());
// ['H', 'E', 'L', 'L', 'O']

👀결론은 그냥 매핑 함수가 필요하거나 브라우저 호환성을 위한다면 Array.from() 메서드를 사용하는게 유용할 듯 하다.