정의 및 사용 방법

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.from() 함수는 유사 배열 객체와 이터러블 객체가 무엇인지 그 개념부터 먼저 알고 있어야 합니다.

유사 배열(Array-like)

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

유사 배열 예시

이터러블 객체(Iterable)

공식적인 용어는 아니지만 통상적으로 이터러블 객체는 Iteration Protocols가 적용되는 객체를 말합니다.
for...of 문으로 순회할 수 있다는 공통점이 있습니다.

이터러블 객체 예시

구문

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

매개변수

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

반환 값

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

매개변수와 반환 값 예시

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

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

Array.from() 함수에 지정한 첫 번째 매개변수가 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

참고문헌

같이 보기