Array.from() 이란?

백견이불여일타(百見而不如一作)

Array.from() 이란?

JavaScript의 정적 메서드로, 유사 배열 객체(array-like objects)나 반복 가능한 객체(iterable objects)를

새로운 배열로 변환하는 데 사용하며 또한 선택적으로 맵핑 함수를 통해 요소를 변환할 수 있습니다.

Array.from(arrayLike, mapFunction, thisArg)

매개변수

1. arrayLike: 배열처럼 동작하는 객체 (예: arguments, NodeList, Set, Map, 문자열 등).
2. mapFunction (선택 사항): 배열의 각 요소에 적용할 함수. (기본값: 없음)
3. thisArg (선택 사항): mapFunction을 호출할 때 this로 사용할 값.

예제코드

1. 문자열을 배열로 변환

   const str = 'Hello';
   const arr = Array.from(str);
   console.log(arr);  // ['H', 'e', 'l', 'l', 'o']
   

2. Set을 배열로 변환

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

3. arguments 객체를 배열로 변환

   function example() {
     return Array.from(arguments);
   }
   console.log(example(10, 20, 30));  // [10, 20, 30]
   

4. 맵핑 함수 사용

   const arr = Array.from([1, 2, 3], x => x * 2);
   console.log(arr);  // [2, 4, 6]
   

5. 배열 생성

   const arr = Array.from({ length: 5 }, (_, i) => i + 1);
   console.log(arr);  // [1, 2, 3, 4, 5]
   

용도

• 유사 배열이나 반복 가능한 객체를 배열로 쉽게 변환.
• 맵핑 기능을 사용해 요소를 즉시 변환 가능.
• Array.prototype.slice의 대체로 더 명확한 코드 작성.

호환성

대부분의 최신 브라우저에서 지원됩니다. 구형 브라우저에서는 폴리필이 필요할 수 있습니다.