Javascript 오브젝트를 배열로 바꾸기 Array.from()

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

 

유사배열 객체 arrayLike란 이터러블한 객체를 말합니다. 즉 인덱스로 원소를 표현할 수 있고, length 속성을 가지고 있는 객체입니다.

 

Array.from()의 기본 사용법은 다음과 같습니다.

Array.from("foo");
// [ "f", "o", "o" ]

 

String인 foo는 유사배열 객체이므로 각 원소를 분리해 배열을 생성합니다.

const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set);
// [ "foo", "bar", "baz" ]

 

중복되는 원소를 가지고 있는 배열을 Set에 넣어 중복 값을 없앤 후 다시 from을 사용해 배열로 만들어 주었습니다.

---

이제 두 번째 매개변수 mapFn을 이용해 보겠습니다.

// 화살표 함수를 map 함수로 사용하여 요소 조작
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

 

mapFn의 매개변수로 arrayLike의 각 요소와 인덱스에 접근할 수 있습니다. 

// 숫자 시퀀스 생성하기
// 배열의 각 위치가 `undefined`로 초기화되므로
// 아래 'v'의 값은 `undefined`가 됩니다.
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

 

위와 같이 빈 객체를 arrayLike로 사용할 수 있습니다. 

 

length 속성에 임의로 5라는 값을 주면, from은 5 길이의 빈 배열로 인식하고, mapFn의 인덱스 i를 이용해 숫자 시퀸스를 생성합니다.

Array.from()은 ES6 문법입니다.