Array.from()
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
시도해 보기
console.log(Array.from("foo"));// Expected output: Array ["f", "o", "o"]console.log(Array.from([1, 2, 3], (x) => x + x));// Expected output: Array [2, 4, 6]구문
Array.from(arrayLike)Array.from(arrayLike, mapFn)Array.from(arrayLike, mapFn, thisArg)매개변수
arrayLike배열로 변환할 순회 가능 또는 유사 배열 객체입니다.
mapFnOptional배열의 모든 요소에 대해 호출할 함수입니다. 이 함수를 제공하면 배열에 추가할 모든 값이 이 함수를 통해 먼저 전달되고,
mapFn의 반환 값이 대신 배열에 추가됩니다. 이 함수는 다음 인수를 사용하여 호출됩니다.thisArgOptionalmapFn실행 시에this로 사용할 값입니다.
반환 값
새로운Array 인스턴스입니다.
설명
다음과 같은 경우에Array.from()을 사용하면Array를 만들 수 있습니다.
순회 가능이 아니거나 유사 배열이 아닌 일반 객체를 배열로 변환하려면(속성 키, 값 또는 둘을 모두 열거하여)Object.keys(),Object.values(), 또는Object.entries()를 사용해야 합니다.비동기 순회 가능을 배열로 변환하려면Array.fromAsync()를 사용합니다.
Array.from()은 희소 배열을 생성하지 않습니다.arrayLike 객체에 일부 인덱스 속성이 누락된 경우, 새 배열에서 해당 속성은undefined가 됩니다.
Array.from()에는 생성되는 배열의 각 요소에 대해 함수를 실행할 수 있는map()과 비슷한 선택적 매개변수mapFn이 있습니다. 좀 더 명확하게 설명하자면,Array.from(obj, mapFn, thisArg)는 중간 배열을 생성하지 않는다는 점과 배열이 아직 생성 중이기 때문에 전체 배열 없이 두 개의 인수(element,index)만 받는다는 점을 제외하면Array.from(obj).map(mapFn, thisArg)과 동일한 결과를 가져옵니다.
참고 :이 동작은형식화 배열에서 더 중요한데, 중간 배열에는 적절한 형식에 맞게 잘린 값이 있어야 하기 때문입니다.Array.from()은TypedArray.from()과 동일한 동작을 하도록 구현되었습니다.
Array.from() 메서드는 범용 팩토리 메서드입니다. 예를 들어,Array의 하위 클래스가from() 메서드를 상속하는 경우, 상속된from() 메서드는Array 인스턴스 대신 하위 클래스의 새 인스턴스를 반환합니다. 실제로this 값은 새 배열의 길이를 나타내는 단일 인수를 받는 모든 생성자 함수가 될 수 있습니다. 순회 가능이arrayLike로 전달되면 인수 없이 생성자가 호출되고, 배열형 객체가 전달되면 배열형 객체의정규화된 length를 사용하여 생성자가 호출됩니다. 최종length는 순회가 완료되면 다시 설정됩니다.this 값이 생성자 함수가 아닌 경우, 일반Array 생성자가 대신 사용됩니다.
예제
String으로 배열 만들기
Array.from("foo");// [ "f", "o", "o" ]Set으로 배열 만들기
const set = new Set(["foo", "bar", "baz", "foo"]);Array.from(set);// [ "foo", "bar", "baz" ]Map으로 배열 만들기
const map = new Map([ [1, 2], [2, 4], [4, 8],]);Array.from(map);// [[1, 2], [2, 4], [4, 8]]const mapper = new Map([ ["1", "a"], ["2", "b"],]);Array.from(mapper.values());// ['a', 'b'];Array.from(mapper.keys());// ['1', '2'];NodeList로 배열 만들기
// DOM 요소의 속성을 기반으로 배열 만들기const images = document.querySelectorAll("img");const sources = Array.from(images, (image) => image.src);const insecureSources = sources.filter((link) => link.startsWith("http://"));유사 배열 객체로 배열 만들기 (arguments)
function f() { return Array.from(arguments);}f(1, 2, 3);// [ 1, 2, 3 ]화살표 함수와 Array.from() 사용하기
// 화살표 함수를 map 함수로 사용하여 요소 조작Array.from([1, 2, 3], (x) => x + x);// [2, 4, 6]// 숫자 시퀀스 생성하기// 배열의 각 위치가 `undefined`로 초기화되므로// 아래 'v'의 값은 `undefined`가 됩니다.Array.from({ length: 5 }, (v, i) => i);// [0, 1, 2, 3, 4]시퀀스 생성기 (range)
// 시퀀스 생성기 함수 (Clojure, PHP 등에선 "range"라고도 함)const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);// 0..4 범위의 숫자 생성하기range(0, 4, 1);// [0, 1, 2, 3, 4]// 두 단계씩 1...10 범위의 숫자 생성range(1, 10, 2);// [1, 3, 5, 7, 9]// 시퀀스로 정렬되는 것을 활용하여 `Array.from`으로 알파벳을 생성하기range("A".charCodeAt(0), "Z".charCodeAt(0), 1).map((x) => String.fromCharCode(x),);// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]배열이 아닌 생성자에 from() 호출하기
from() 메서드는 새 배열의length를 나타내는 단일 인수를 받아들이는 모든 생성자 함수에서 호출할 수 있습니다.
function NotArray(len) { console.log("NotArray called with length", len);}// 순회 가능console.log(Array.from.call(NotArray, new Set(["foo", "bar", "baz"])));// NotArray는 length가 undefined인 상태로 호출됩니다.// NotArray { '0': 'foo', '1': 'bar', '2': 'baz', length: 3 }// 유사 배열console.log(Array.from.call(NotArray, { length: 1, 0: "foo" }));// NotArray는 length가 1인 상태로 호출됩니다.// NotArray { '0': 'foo', length: 1 }this 값이 생성자가 아닌 경우, 일반Array 객체가 반환됩니다.
console.log(Array.from.call({}, { length: 1, 0: "foo" })); // [ 'foo' ]명세서
| Specification |
|---|
| ECMAScript® 2026 Language Specification # sec-array.from |