[JavaScript] Array.from() 활용법

JavaScript의 Array.from() 메서드는 배열과 유사한 객체나 반복 가능한 객체로부터 새로운 배열을 생성할 수 있는 강력한 도구다. 이 메서드는 NodeList, 문자열, 그리고 특정 조건에 따라 배열을 생성하는 작업을 단순하게 해준다. 이번 글에서는 Array.from()의 다양한 활용 예제와 함께 그 기능을 자세히 살펴보겠다.

1. NodeList를 배열로 변환하기

DOM 조작을 할 때 자주 NodeList를 마주치게 된다. NodeList는 배열처럼 생겼지만 실제 배열이 아니기 때문에 배열 메서드를 직접 사용할 수 없다. 이때 Array.from()을 사용하면 NodeList를 배열로 쉽게 변환할 수 있다.

const nodeList = document.querySelectorAll('p'); // NodeList
const array = Array.from(nodeList); // Array

array.forEach(node => {
    console.log(node.textContent);
});

2. 문자열을 배열로 변환하기

문자열을 한 글자씩 나누어 배열로 만들고 싶을 때도 Array.from()을 사용할 수 있다.

const str = 'Hello, World!';
const charArray = Array.from(str);

console.log(charArray);
// ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

3. 반복 가능한 객체를 배열로 변환하기

반복 가능한 객체(Iterable)란 for...of 구문으로 순회할 수 있는 객체를 의미한다. Array.from()은 이러한 객체를 배열로 변환할 수 있다.

const set = new Set([1, 2, 3, 4, 5]);
const array = Array.from(set);

console.log(array);
// [1, 2, 3, 4, 5]

4. 특정 조건을 만족하는 배열 생성하기

Array.from()의 두 번째 인자로 맵핑 함수를 제공하여, 특정 조건에 따라 배열을 생성할 수 있다.

const length = 5;
const squareArray = Array.from({ length }, (v, i) => i * i);

console.log(squareArray);
// [0, 1, 4, 9, 16]

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

배열 유사 객체란 배열처럼 인덱스와 length 프로퍼티를 가지고 있는 객체를 말한다. Array.from()을 사용하면 이러한 객체도 배열로 변환할 수 있다.

const arrayLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
};

const array = Array.from(arrayLike);

console.log(array);
// ['a', 'b', 'c']

6. 이차원 배열 생성하기

이차원 배열을 생성할 때도 Array.from()을 유용하게 사용할 수 있다.

const rows = 3;
const cols = 4;
const matrix = Array.from({ length: rows }, () => Array.from({ length: cols }, () => 0));

console.log(matrix);
// [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]