Javascript

자바스크립트 Array.from() 메서드 사용 방법

김스택 2024. 2. 15. 15:33

Array.from() 메서드란?

Array.from() 메서드는 다양한 객체들을 배열로 변환할 때 사용되는 자바스크립트의 내장 함수입니다. 이 메서드는 유사 배열 객체나 Iterable 객체 (예: Map, Set, 문자열 등)를 새로운 배열 인스턴스로 만들어 줍니다. 유사 배열 객체란 length 속성과 인덱스로 접근 가능한 요소를 가진 객체를 말합니다. Array.from()을 사용하면 실제 배열의 메서드를 사용할 수 있게 되어, 데이터를 더 쉽게 조작할 수 있습니다.

 

 

Array.from() 메서드 기본 사용법

 

Array.from(arrayLike, mapFn, thisArg)

 

  • arrayLike : 배열로 변환하고자 하는 유사 배열 객체나 Iterable 객체입니다.
  • mapFn (선택 사항) : 배열의 모든 요소에 대해 호출할 맵핑 함수입니다. 이 함수를 통해 변환 과정 중 각 요소를 원하는 형태로 가공할 수 있습니다.
  • thisArg (선택 사항) : mapFn 실행 시 this로 사용할 값입니다.

 

 

유사 배열 객체를 배열로 변환하기

유사 배열 객체(Array-like object)는 일반 배열과 비슷하지만, 배열이 아닌 객체를 말합니다. 이러한 객체는 배열의 특성인 '순서가 있는 데이터 집합'을 가지고 있으며, 숫자 인덱스를 사용해 요소에 접근할 수 있고, length 속성을 가지고 있습니다.

유사 배열 객체와 배열의 주요 차이점은 배열 메소드를 직접 사용할 수 없다는 것입니다. 유사 배열 객체에 배열 메서드를 사용하기 위해 Array.from() 메서드를 통해 배열로 변환할 수 있습니다.

 

 

// 문자열을 배열로 변환하기
let str = 'hello';
let strArray = Array.from(str);
console.log(strArray); // ['h', 'e', 'l', 'l', 'o']

// arguments 객체를 배열로 변환하기
function convertArguments() {
  return Array.from(arguments);
}
console.log(convertArguments(1, 2, 3)); // [1, 2, 3]

 

위의 코드처럼 문자열이나 arguments 객체 같은 유사 배열을 실제 배열로 변환할 수 있습니다.

 

 

Iterable 객체를 배열로 변환하기

Iterable 객체는 반복 가능한 객체를 의미합니다. 즉, 객체가 반복 작업을 할 수 있는 구조로 되어 있다는 것을 나타냅니다.

 

// Set을 배열로 변환하기
let set = new Set(['foo', 'bar', 'baz', 'foo']);
let setArray = Array.from(set);
console.log(setArray); // ['foo', 'bar', 'baz']

// Map을 배열로 변환하기
let map = new Map([['a', 1], ['b', 2], ['c', 3]]);
let mapArray = Array.from(map);
console.log(mapArray); // [['a', 1], ['b', 2], ['c', 3]]

 

위의 코드처럼 Map이나 Set 같은 Iterable 객체도 배열로 변환할 수 있습니다.

 

 

범위 배열 생성하기

 

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

 

  • 첫 번째 인자는 배열과 유사한 객체로, 여기서는 length 속성을 가진 객체를 사용합니다. length: 5는 이 객체가 5개의 "공간"을 가짐을 의미하지만, 실제로는 이 공간들이 비어있습니다.
  • 두 번째 인자는 맵핑 함수로, 배열의 각 요소를 생성하기 위해 호출됩니다. 이 함수는 두 개의 매개변수를 받는데, 첫 번째 매개변수 _는 현재 요소의 값으로, 여기서는 사용되지 않습니다 (일반적으로 언더스코어 _는 관례적으로 사용되지 않는 변수를 나타냅니다). 두 번째 매개변수 i는 요소의 인덱스를 나타냅니다. 함수의 반환 값 i + 1은 실제 배열 요소의 값을 결정합니다. 이는 인덱스가 0부터 시작하기 때문에, 각 인덱스에 1을 더함으로써 1부터 시작하는 숫자 범위를 생성합니다.

 

 

HTML 문서의 DOM 요소를 배열로 변환하기

문서 내의 모든 <div> 태그를 배열로 가져와서 처리하고 싶다면, document.querySelectorAll() 메소드와 함께 Array.from()을 사용할 수 있습니다.

 

let divs = Array.from(document.querySelectorAll('div'));
divs.forEach(div => {
  console.log(div); // 각 <div> 요소에 대한 처리
});