정의 및 사용 방법

Array.from() 함수는 지정한 유사 배열 객체나 이터러블 객체를 새로운 배열로 변환하여 반환하는 함수입니다.

이 함수를 사용하면, 실제 배열은 아니지만 배열처럼 보이는 객체인 유사 배열이나 이터러블 객체를 진짜 배열로 변환하여 다루고 싶을 때 쉽고 유용합니다.

기본 예제

다음은 Array.from() 함수를 사용해서 유사 배열인 문자열을 진짜 배열로 변환하는 간단한 예제입니다.

JavaScript 
// 문자열은 유사 배열 객체로, Array.from()으로 배열로 변환할 수 있습니다.
const str = "Hello";

// Array.from()을 사용하여 배열로 변환
const charArray = Array.from(str); 
console.log(charArray); // 출력: ['H', 'e', 'l', 'l', 'o']

참고 사항 - 유사 배열과 이터러블 객체

Array.from() 함수는 유사 배열 객체와 이터러블 객체를 매개 변수로 지정해서 배열로 변환할 수 있습니다.
만약 매개 변수로 전달된 값이 유사 배열 객체나 이터러블 객체가 아니면 빈 배열([])만을 반환합니다.

따라서, Array.from() 함수를 올바르게 사용하려면 유사 배열과 이터러블 객체가 무엇인지 그 개념부터 먼저 알고 있어야 합니다.

유사 배열(Array-like)

유사 배열 객체는 배열처럼 length 속성 및 인덱스를 통해 항목에 접근할 수 있는 객체입니다.
그러나 진짜 배열은 아니기 때문에 배열 메서드(map(), filter() 등)는 사용할 수 없습니다.

유사 배열 예시

이터러블 객체(Iterable)

for...of 루프를 사용할 수 있는 객체입니다.

이터러블 객체 예시

문자열, NodeList, HTMLCollection 등은 유사 배열이면서 동시에 이터러블 객체입니다.

구문

JavaScript 
Array.from(arrayLike)
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

매개변수

Array.from() 함수의 매개변수
arrayLike 배열로 변환할 유사 배열 객체나 이터러블 객체
mapFn 옵션. 각 요소에 대해 실행할 함수
thisArg 옵션. mapFn 실행 시 this로 사용할 값

반환 값

매개 변수로 지정한 객체의 각 항목을 순서대로 복사하여, 새로운 배열을 만들어 반환합니다.
이 함수는 원본 객체(유사 배열 또는 이터러블)를 수정하지 않고, 그 안의 항목들을 복사해서 완전히 새로운 배열을 만들어 반환합니다.

매개변수와 반환 값 예시

Array.from() 함수의 매개변수와 반환 값을 쉽게 이해할 수 있도록 몇 가지 예제를 준비했습니다.

arrayLike 인자가 유사 배열 객체나 이터러블 객체가 아니면

Array.from() 함수에 지정한 첫 번째 매개변수가 유사 배열 객체나 이터러블 객체가 아니면 빈 배열([])만을 반환합니다.

JavaScript 
const num = 1; // 유사 배열 객체나 이터러블 객체가 아닌 숫자
const numArray = Array.from(num);

// 빈 배열을 반환
console.log(numArray); // 출력: []
mapFn 인자 활용하기

Array.from() 함수는 두 번째 인자(mapFn)로 map() 함수처럼 각 요소에 대해 변환 작업을 할 수 있습니다.

JavaScript 
const numbers = [1, 2, 3, 4, 5];

// 각 숫자에 2를 곱하는 새로운 배열 생성
const doubled = Array.from(numbers, num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

활용 예제

Array.from() 함수는 DOM을 다루는 HTMLCollection에 많이 활용할 수 있습니다.
특히 HTMLCollection 객체를 반환하는 getElementsByTagName()이나 getElementsByClassName()으로 요소를 선택했을 때 매우 유용합니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTMLCollection</title>
    </head>
    <body>
        <ul>
            <li>김밥</li>
            <li>라면</li>
            <li>떡볶이</li>
        </ul>
        <script src="tag-name.js"></script>
    </body>
</html>
tag-name.js 
const liElements = document.getElementsByTagName("li"); // li 태그를 모두 선택
console.log(liElements); // HTMLCollection(3) [li, li, li]

// Array.from() 메서드를 사용해서 배열 객체로 변환
const liElementsArray = Array.from(liElements);

liElementsArray.forEach(li => {
    console.log(li.textContent);
});
// 출력: "김밥" "라면" "떡볶이"

코드 부연설명
forEach() 함수는 배열을 순회해서 각 요소를 콜백 함수로 처리하기 위한 배열의 메서드입니다. 코드 예제에서는 이 함수로 HTMLCollection를 배열 객체로 변환해서 접근할 수 있는 방법을 제시하고 있습니다.

브라우저 호환성

Array.from() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Array.from() 45 12 32 9

명세서

Array.from() 함수의 명세서 사양
명세서 사양
Array.from() ECMAScript® 2026 Language Specification
#sec-array.from

참고문헌

같이 보기